An overview of React Query.

Hey there.

So yea, you probably have or are about to start a react project, you know you are going to be interacting with a server, and so you are looking for the best way to do so given your needs. you probably have heard of React Query and you would love to get an overview of what it is and if it is worth it for your project. well, here I got you covered. This article is aimed at helping you understand the scope and purpose of React Query.

what is React Query

React Query is a library you can use to synchronize your react-app with an external factor(in most cases a web server). this library handles a lot of stuff out of the box that would be otherwise time-consuming and possibly tedious for some, things like caching data to optimize for performance, background fetching together with cache revalidation and invalidation to always have the up-to-date data on the screen, server state update by mutation with a developer-friendly API, including APIs for advanced implementations like pagination, and infinite scroll.

Having seen that the React Query library probably has all you need for your data fetching, let's get into some details.

setup

to get access to the React Query client, you need first of all to have your react app installed and all set (I will assume here that you already know how to set up a react app, however you can leave a comment if you wish that I write an article on that.), then we will install the React Query library with the following command;

$ npm i react-query

or with yarn

 $ yarn add react-query

now that you have installed it successfully, let's set it up in your project.

we will need to wrap the app or at least the portion of it where we would like to use the library in a QueryClient context provider passing in it a client property. this client is an instantiated QueryClient. we do it as below.

 import { QueryClient, QueryClientProvider } from 'react-query'

 const queryClient = new QueryClient()

 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <YourApp />
     </QueryClientProvider>
   )
 }

so now we are all set.

How to use.

we can therefore start using the library to fetch data from our server in any child component as below

import { useQuery} from 'react-query'

function YourApp() {
    //call the useQuery hook as below to make a fetch
   const { isLoading, error, data } = useQuery(
    //pass in a key to ease the caching process
    'repoData',

    //then pass in a callback function that will return a promise
    //that resoves with the data or throws an error 
    () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-                  query').then(res =>
       res.json()
     )
   )

    //use the isLoading flag to display the loading ui
   if (isLoading) return 'Loading...'

    //use the error ui to display the error ui
   if (error) return 'An error has occurred: ' + error.message

    //in most cases you can safely display your data if
    //both above flags get passed
   return (
     <div>
       {data}
     </div>
   )
 }

Yes! it's as straightforward as that.

so basically to make a simple request, you get to call the useQuery hook, passing in at least two parameters;

• the key

• and a callback

The key will serve as an identifier for the query, which is used by the caching system. the key can be either a string. or an Array of a string and any number of serializable objects(the latter can be used for nested resources and queries with additional parameters).

the second parameter is the callback function, which returns a promise that resolves in the data or throws an error.

The user query hook can also take a third parameter, which is the options object, which can be used to further determine the behavior of the data fetching.

conclusion

Hopefully, this was enough of a guide to give you a basic understanding of the React Query library and help you see how helpful it might be to you and possibly your team.

here is the link to their website if you want to learn more

if you have gone this far into the article, I want to say a big thank you and until next time.

happy coding...