What is react-query ? A CURD operation using react-query 
Tags: react, javascript, reactquery
Published: 2020-05-22 12:30:54

##What is react-query ? 
 react-query is a hooks for fetching, caching and updating asynchronous data in react. 

##What is solves  ?
 react-query makes things easier that we're facing while fetching the data from the server.It can handle REST,graphQL or any sort of API request.

 --> *Auto-Caching* : If a API end point is initiated for the first time react-query will cache the request so when you initiate the same API now the API will be blinking fast .

 --> *Windows Refocusing*: Whenever the new focus is made to the application window the api will be called to ensure the data is up to date!.
 But wait each time making a API request will it takes delay ??? answer is strictly **no** the second time it's loaded using the cache

_seems cool??? it has many more cool stuff's_

 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rfme3advvpqhvraa4fw.png)

        
*_image taken from official docs_

##useQuery
The major term to be known before using the react-query is useQuery. It is the hook which is used to make an API request .
  ` const { status, data, error } = useQuery('todos', fetchTodoList)`
this is the way to use useQuery 

_'todos'_ : the unique identifier(_queryKey_) for the query it's the thing used to differentiate between multiple quries,used to update things in the query.
_*fetchTodoList*_ : it is the function where the API call can be done .
`const fetchTodoList=()=>return new Promise(//_fetch/axios call here_)`
_*status*_ : it holds the status of API (success,loading)
_*data*_ : the data that API returns
_*error*_: returns if any error occurs in the API

##queryCache
Majority of the operations of the performed in react-query is done using **queryCache**.

##useMutation
useMutation is used to perform the operations in the server like add,edit,delete

The major one's that we're going to cover in queryCache are,
-->_setQueryData_  : used to set the value in the query based on queryKey
-->_refetchQueries_ : used to refetch the particular query
-->_removeQueries_ : used to remove the query from cache

_we'll see the practical use of each in the following example_

##Display List 

the following is a thing to display the list item 
    * _uses jsonplaceholder api_
 {% codesandbox hungry-field-yfg9u %}

*!!Note : I recommend to open the codesandebox in a new window and check the network tab to see the API call's*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fh849gtkvh5y0uztock0.png)
 
this is the custom hooks to fetch the list data . 
!!Note: _Use custom hooks to reuse the query anywhere you need_

`  const { status, data,error } = useListDataFetch();` 
this custom hooks has the details returned by the api in data. If you check the network tab you can see the fetch happing on every time a new focus is set to the application .

##Edit List
Edit functionality has some more things to see 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3i5ca6znj7sn0apskdnp.png)

_onMutate_ : it is the things that executes before the API call success. 
             Specially for reactivity kind of things.
_onError_ : executes if any error occurs in the API.
_onSettled_/_onSuccess_ : executes after the API call is success.

_queryCache.getQueryData('listData')_ : gets the values from the querykey listData.

_queryCache.setQueryData('listData', updatedValue)_ : sets the value in the udpated value in the querykey listData.

 _queryCache.refetchQueries('listData')_ : it's used to refetch the query to ensure UI has updated data . Usually better to use after edit/add/delete

**!!Note : Edited things will be restored after the API call success because it's just a fake API to show you how things actually works**

##Delete List 

Delete is similar to the edit with only one minimal change

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5qsldo650pk1evn3hmwt.png)

Hope you got a some things know about react-query . It's such a nice and useful package to use with zero dependencies . Definitely you can try react-query in your appplication 

You can get the code also [here](https://github.com/karthick3018/react-query-app)

Check out the official docs they have a amazing and clear docs [link](https://github.com/tannerlinsley/react-query)

A video tutorial [link]( https://www.youtube.com/watch?v=seU46c6Jz7E)

_Thanks for your time_ !!
_See you all then_
_Happy Coding_ _stay safe!_