> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/react/react-query.md).

# React Query

### Learn React Query basics - <https://youtu.be/Q12EVU8YpTY?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2>

### useQuery Hook

* Param 1 - a unique key name for the query
* Param 2 - API fetch function
* Param 3 - React-query configuration object

Returned value from useQuery hook is an object with following important properties

|            |                                                                                                                                                                                           |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading  | indicates if query is waiting for data, this would be true when the query is fetched for the 1st time, but false once ReactQuery starts using the cached data for the provided query key. |
| isFetching | indicates if query is fetching data in the background                                                                                                                                     |
| data       | the response data                                                                                                                                                                         |
| isError    | if any error fetching data                                                                                                                                                                |
| error      | error that happened when fetching data                                                                                                                                                    |
| refetch    | a function to force trigger fetching data, useful when you want to start querying on click of a button or on some event                                                                   |

Param 3 = a configuration object for the query, provides following options

|           |                                                                        |
| --------- | ---------------------------------------------------------------------- |
| onSuccess | success callback function                                              |
| onError   | error callback function                                                |
| select    | function to massage, select, customize the response data               |
| enable    | true(default) or false(means query won't be called on component mount) |
|           |                                                                        |
|           |                                                                        |
|           |                                                                        |
