What the heck is React-Query?

Heard about maintaining your states globally when you need the data across the components either we can do it on the client side maintaining the cache data using some store or state management library or we can make the ultimate move now using React Query !

What is React Query then ?

React Query is a server state library for managing the asynchronous client and server operation and actions reducing the boiler code that used to be a part when you add a client state management library probably React-Redux ! if you develop application in React.js

How to use React Query efficiently and does it replaces the state management libraries ?

It might be not possible to replace the libraries when the application is very complex or it has very complex modal structures or simply we can say application like music production for example (FL studio) otherwise React Query is the perfect choice with no issues.

The Docs as well is almost perfect to get started and play along with the queries to see what happens and why !

Lets Start with the basics of React Query

The React Query have a great default configs but what are they and what do it mean is a great thing to understand if you want to work on react-query efficiently I rewrite these in my code-base where I write the QueryClient Provider.

const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 1,
      },
    },
  });

So here if we see we tried to overwrite the default configuration of the QueryClient(), where we did a refetchOnWindowFocus:false cause we don't want to refetch data by calling API's every time our browser window gets focused after everytime we switch the tabs on our browsers
so what is retry retry is the number of times the query re-runs before showing the error message displayed by the onError method or any custom logic written inside the fucntion, for example retry: fasle will not allow any query re-run.

I know I know , you are getting a lot of question , question on how the data gets updated inside the query-call or what if my data doesn't get updated

The concept you need to look is staleTime , so what in freaking world is staleTime, it is the length of time before your data becomes stale. By default the staleTime in react-query is 0 , which means immediately your data is consider to be stale

If your data is fresh it will be cached or saved and it will be used repeatedly without making API calls to the server

So you might be thinking will be there any cache time for caching the data again if there is any changes inside the data coming from server , by the way We do have cacheTime it is the time before the cached or inactive data gets removed.

In react-query cacheTime by default is set to 5 mins and hence we need to carefully choose it and the difference between them is great to understand how react-query works and to set both staleTime and cacheTime is a little bit of challenge moreover we will see in the next part how we can make it a piece of ease by seeing in depth how it works

Till then its a great goodbye from my side if you want to learn it from official docs React-Query

Untill Next time !