From the beginning of React, the community has been building a rich ecosystem of tools and libraries that help you build your applications. One of the most important parts of this ecosystem is the ability to fetch data from a server and display it in your application.
While there are numerous options available for fetching data in React and React Native, the community has recently been gravitating towards adopting React Query as the go-to solution. The reason for this trend is due to React Query’s simplicity, flexibility, and tone of features that it provides out of the box.
What is react-query?
React-query It is a very powerful library that helps you manage your data fetching, caching, invalidating, and even implementing optimistic UI in a very simple way.
react-query offers hooks that simplify the process of fetching and updating data in your app. You can use pre-built hooks like
useMutation, or create your own custom hooks based on them. This makes it easier for developers to manage data and build more efficient applications.
Using react-query-kit & axios
As the starter is designed to save you time and effort, we already have installed react-query and Axios and configured them for you.
src/api folder contains all the fetching logic, with a
common sub-folder that holds a
queryClient, and several utility functions specifically designed to work with
Because we’re using Axios as the client, we can leverage all its advanced features, including interceptors, request cancellation, and more. For additional information on Axios, you can check out their website here.
To make writing queries and mutation even easier we are using react-query-kit, a simple toolkit that makes ReactQuery reusable and type-safe with less boilerplate.
Data Fetching Use Cases
Suppose you’re building a blog app and need to add the following features:
- A Feed Screen that displays all posts
- A Post Screen that shows the details of a single post
- A Screen to create a new post
To get started, create a new folder named
src/api. This folder will hold all the post-related logic. You can apply this same concept to any other entities, such as users, within your application.
The feed screen will show all the posts available in the app. To achieve this, we need to create a hook called
usePosts that will fetch the posts and display them as a list.
Here are the steps to create the
- Inside the
src/api/postsfolder, create a new file called
- Define the type for your
Variablesif required, to ensure that you receive the correct data from the server. For instance, you could create a
Posttype for the posts.
- Use the
react-query-kitlibrary to create a query hook that will fetch the data from the server. We’ll name it
Below is the complete code for the use-posts.ts file:
createQuery function accept an object with the following:
options. Read more about (createQuery)[https://github.com/liaoliao666/react-query-kit#createQuery]
Now that we have created our custom hook, we can use it in our app to display a list of posts. Follow the steps below to achieve this:
- Create a new screen in your app and name it Posts.
- Import and use the usePosts hook we created earlier to fetch the list of posts.
- Use the fetched data to display a list of posts.
As you can see in the code above, we use the
usePosts hook to fetch data and handle the loading state. This allows us to display a loading indicator while the data is being fetched, and then display the list of posts once the data is ready.
In the same example above we also show an error message if the request fails.
The post screen will display the details of a single post. To fetch and display the post, we will create a new hook called
We can use the same steps we used earlier to create the
usePosts hook. The only difference is that we will use the
id of the post as a variable to fetch the specific post.
Below is the complete code for the
Now our hook is ready to be used in our post details screen:
Add new post
To add a new post, we can use the
createMutation function from the
Here are the steps to create the useAddPost hook:
- Create a new file called
- Define a type for your
Responseto ensure that you are sending the correct data to the server.
- Use the
react-query-kitlibrary to create a mutation hook that will send the data to the server. We’ll name this hook
Here is the complete code for the
Now that we have our mutation hook ready. Let’s create a new screen called
AddPost and use data from
useAddPost hook to create a new post:
Exactly the same way we did in form section while creating a login form, we will follow the same approach to create a from to create a new post.
- Create the schema for the new form using Zod
- Create the form using react-hook-form
useAddPosthook and call it when the form is submitted
- You can use the
isLoadingstate to display a loading indicator while the data is being sent to the server and then redirect the user to the feed screen on success.
Create API Hooks with Vs Code Snippets
Maybe you mentioned that creating a new query or mutation hook looks the same every time and you are right. That is why we created a set of vscode snippets to help you create your hooks in no time.
useq: Create a new query hook
useqp: Create a new query hook with params
useiq: Create a new infinite query hook
usem: Create a new mutation hook