A Simple and Powerful Way to Fetch Data in Your App

React Native Toolkit Query is a library that simplifies data fetching and caching in your React Native app. It is based on Redux Toolkit Query, which is an addon for Redux Toolkit that provides a declarative API for defining and consuming data from any backend. In this post, I will show you how to use React Native Toolkit Query to fetch data from a REST API, display it in a list, and handle loading and error states. I will also explain some of the benefits and features of React Native Toolkit Query, such as automatic caching, refetching, and invalidation.

Setting Up React Native Toolkit Query

To use React Native Toolkit Query, you need to install the @reduxjs/toolkit and @reduxjs/toolkit/query/react-native packages:

npm install @reduxjs/toolkit @reduxjs/toolkit/query/react-native

Then, you need to create an API service using the createApi function from @reduxjs/toolkit/query/react-native. This function takes an object with a baseQuery option, which specifies how to make requests to your backend, and an endpoints option, which defines the endpoints of your API.

For example, let’s say we have a REST API that exposes a /posts endpoint, which returns an array of posts with id, title, and body fields. We can create an API service for this endpoint like this:

The fetchBaseQuery function is a built-in base query that uses the native fetch API to make requests. You can also use any other data fetching library, such as axios or react-query, by providing a custom baseQuery function.

The builder.query method creates a query endpoint, which takes a query option that returns the URL for the request. You can also pass other options, such as transformResponse, providesTags, and onQueryStarted, to customize the behavior of the query. You can read more about these options in the Queries section of the Redux Toolkit Query documentation.

The createApi function returns an object with several properties, such as reducer, middleware, and useGetPostsQuery. The reducer and middleware are used to integrate the API service with the Redux store, and the useGetPostsQuery is a custom React hook that allows us to consume the data from the query endpoint.

Using React Native Toolkit Query Hooks

To use the React Native Toolkit Query hooks, we need to wrap our app with the QueryClientProvider component from @reduxjs/toolkit/query/react-native, and pass it a queryClient prop. The queryClient is an object that manages the cache and the queries for our app. We can create a queryClient using the createQueryClient function from @reduxjs/toolkit/query/react-native, and pass it an object with a api option, which contains the API service we created earlier.

For example, we can wrap our app like this:

Now, we can use the useGetPostsQuery hook in our PostsList component to fetch and display the posts. The hook returns an object with several properties, such as data, isLoading, isError, and error. The data property contains the cached data from the query, or undefined if the query has not been resolved yet. The isLoading property is a boolean that indicates whether the query is in progress. The isError property is a boolean that indicates whether the query has failed. The error property contains the error object from the query, or undefined if the query has not failed.

For example, we can use the hook like this:

Benefits and Features of React Native Toolkit Query

React Native Toolkit Query provides several benefits and features that make data fetching and caching easier and more efficient in your app. Some of them are:

• Automatic caching: React Native Toolkit Query automatically caches the data from your queries, and reuses it whenever possible. This means you don’t have to worry about managing the cache yourself, or writing reducers and selectors to store and access the data in the Redux store. You can also customize the cache behavior, such as the cache time, the cache key, and the cache invalidation, using the query options and the providesTags and invalidatesTags fields.

• Automatic refetching: React Native Toolkit Query automatically refetch the data from your queries when certain conditions are met, such as when the app becomes active, when the network status changes, or when the query parameters change. This means you don’t have to manually trigger the refetching yourself, or use effects or listeners to monitor the changes. You can also customize the refetching behavior, such as the refetch interval, the refetch on focus, and the refetch on reconnect, using the query options and the refetchOnMountOrArgChange and refetchOnReconnect fields.

• Automatic invalidation: React Native Toolkit Query automatically invalidates the cache entries that are affected by your mutations, and triggers a refetch for the queries that depend on them. This means you don’t have to manually invalidate the cache yourself, or use actions or thunks to dispatch the invalidation. You can also customize the invalidation behavior, such as the invalidation delay, using the mutation options and the invalidatesTags field.

• Optimistic updates: React Native Toolkit Query supports optimistic updates, which means you can update the cache with the expected result of your mutation before it is confirmed by the server, and revert it if the mutation fails. This makes the UI feel faster and more responsive, and reduces the loading state. You can enable optimistic updates by using the optimisticUpdate option in your mutation endpoint, and passing the current cache entry and the mutation argument to it.

• Pagination and infinite queries: React Native Toolkit Query supports pagination and infinite queries, which means you can fetch data in chunks and append or prepend them to the existing data. This is useful for scenarios where you have a large amount of data that you want to display in a scrollable list or a grid. You can use the paginate and keepUnusedData options in your query endpoint, and the fetchNextPage and fetchPreviousPage functions in your hook, to implement pagination and infinite queries.

Conclusion

React Native Toolkit Query is a simple and powerful way to fetch data in your React Native app. It simplifies the data fetching and caching logic, and provides several benefits and features, such as automatic caching, refetching, invalidation, optimistic updates, pagination, and infinite queries. It is based on Redux Toolkit Query, which is an addon for Redux Toolkit that provides a declarative API for defining and consuming data from any backend.

I hope you enjoyed the post, and found it useful and informative.
Thank you for reading!