In this article, I will be going through the basics of React Query and how it can be used to build a simple user list application. as per React Query site
to make use of react query, we have to wrap our main app component inside QueryClientProvider component. Then we need to provide client by initializing QueryClient as follows,
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
ReactDOM.render(
// wrap the app in the query client provider
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
document.getElementById("root")
);
index.js file will look like below snippet.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
after configuring the provider, we need to implement data fetching and uploading logic in our components. The hooks are as follows,
useQuery
useMutation
useQuery
useQuery is a hook which returns the data from the server.
useQuery syntax is as follows,
useQuery({
queryKey, // key used to identify the query in the cache
queryFn, // function which returns the query object
enabled, // boolean to enable or disable the query, default: true
retry, // number of retries in case of error, number
});
useMutation
useMutation takes two arguments, first is the query name and second is the options params.
useMutation syntax is as follows,
useMutation(mutationFn, {
retry, // number of retries in case of error, default: boolean | number
onSuccess // callback function to be called on success
onError // callback function to be called on error
});
Hooks usage
to make use of the useQuery and useMutation hook, create components folder and create User.js and Users.js files.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Users.js
import { useQuery } from "react-query";
const { data, isLoading, error, isError } = useQuery("users", fetchUsers, {
refetchOnWindowFocus: false, // this is optional, if this option enabled, then the data will be refetched on window focus
});
the above code will return the data from the server and the loading state.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
the above code lines are used to create a useMutation hook which returns the mutate function which can be used to make the mutation request.
the onSuccess method is used to refetch the data from server after a post request to server is successful.
now open the network inspector in your browser and check the network requests. you can see the get request for fetching the users data will be fired after every successful post request. this is because the onSuccess method is used to invalidate the users cache.
From the above example we don’t have to use useEffect and useState hook to fetch the updated data from server, we can do it by invalidating the cache.