Custom Hooks for Data Fetching

Create a custom hook that encapsulates React Query's useQuery or useMutation, demonstrating how to simplify data fetching and mutation operations across components.

import { useQuery } from 'react-query';

export const useFetchData = (queryKey, fetchFunction) => {
  return useQuery(queryKey, fetchFunction);
};

This piece of code creates a custom hook named useFetchData that encapsulates React Query's useQuery hook. It simplifies data fetching across components by taking a queryKey and a fetchFunction as parameters.

import { useMutation } from 'react-query';

export const usePostData = (mutationFn) => {
  return useMutation(mutationFn);
};

This code snippet demonstrates how to create a custom hook named usePostData that encapsulates React Query's useMutation hook. It is designed to simplify mutation operations, such as POST, PUT, DELETE, by taking a mutation function as a parameter.