https://github.com/sudhilraj/react-query
A repository that demonstrate the working of React Query
https://github.com/sudhilraj/react-query
axios json-server react-query react-query-devtools reactjs tailwindcss vite
Last synced: about 2 months ago
JSON representation
A repository that demonstrate the working of React Query
- Host: GitHub
- URL: https://github.com/sudhilraj/react-query
- Owner: SudhilRaj
- License: mit
- Created: 2024-06-05T07:35:41.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-28T11:53:51.000Z (about 1 year ago)
- Last Synced: 2024-12-27T11:30:58.106Z (12 months ago)
- Topics: axios, json-server, react-query, react-query-devtools, reactjs, tailwindcss, vite
- Language: CSS
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tanstack Query (Formerly known as React Query)
In order to run this project you need to start both the client and the server(API).
NOTE: For better undertanding of the Performance and Caching behaviour you can throttle the network speed to Slow 3G, and use the integrated ```react-query-devtools``` to understand the query/mutation flow.
## Start Client
```cd client```
```npm run dev```
## Start Server
```cd server```
```npm start```
## About React Query
- Data fetching is fairly simple, managing the asynchronous state is difficult!
- React Query is a powerful asynchronous state management tool/library!
- React query is a library that simplifies the way we fetch, cache and synchronize data.
- React itself has no opinion about how we fetch data - We can use native browser ```fetch``` API or ```axios``` or anything. In order to do this type of normal data fetching we also need the hooks like ```useState``` and ```UseEffect```.
- It is difficult to manage when we have the requirements like caching, retries, etc. React Query handles all these caching, retries, invalidation and much more out of the box.
- There are many other features like Auto Refetching, Parallel Queries, Dependent Queries, Infinite scroll, Offline Support, Window Focus Refetching, Scroll Recovery, Offline Support, Request Cancellation, Mutations API etc
## Key Concepts
### 1) ```useQuery```
- It is one of the most important hook in React Query to fetch and manage some data from a server.
- We can choose any fetching logic (fetch, axios) it needs to have a promise.
- ```useQuery``` must needs a ```queryKey``` and a ```queryFn```.
Example:
```
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import axios from 'axios'
const queryClient = new QueryClient()
export default function App() {
return (
)
}
function Example() {
const { isPending, error, data, isFetching } = useQuery({
queryKey: ['repoData'],
queryFn: () =>
axios
.get('https://api.github.com/repos/tannerlinsley/react-query')
.then((res) => res.data),
})
if (isPending) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
{data.name}
{data.description}
👀 {data.subscribers_count}{' '}
✨ {data.stargazers_count}{' '}
🍴 {data.forks_count}
{isFetching ? 'Updating...' : ''}
)
}
const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render()
```
There are many other optional params that we can add to the ```useQuery``` such as ```staleTime```, ```gcTime```, ```refetchOnWindowFocus```, etc
#### ```staleTime```
- Providing a stale time not actually refetch a query. Stale queries are refethed automatically in the background when few things are happened:
- When the new instance of the query is mounted
- When the window is re-focused
- When the network is re-connected
- On the provided ```refetchInterval```
- We can provide a default ```staleTime``` that applies to all the queries/mutations in the main ```queryClient``` declaration
```const queryClient = new QueryClient({defaultOptions: {queries: {stateTime: 6000}}})```
#### ```gcTime``` - Garbage Collection Time (Cache Time)
- By default 5 minutes
```const queryClient = new QueryClient({defaultOptions: {queries: {stateTime: 6000, gcTime: 10*(60*1000)}}})```
#### ```refetchOnWindowFocus```
- ```true``` by default
#### ```retry```
- By default 3
- We can provide a ```retryDelay``` also
### 2) ```useMutation```
- To update the state of a server
- There should be a ```mutationFn```
- There different mutation life cycles for ```useMutation```: ```onMutate```, ```onError```, ```onSuccess```, ```onSettled```
Example:
```
const createPostMutation = useMutation({
mutationFn: createPost,
// mutationFn: (variables) => createPost(variables),
// The above mentioned variables is the exact same values we are passing to the mutate function of useMutation
// It is the default first paramter, so we dont need to pass it explicitly!
onSuccess: data => {
queryClient.setQueryData(["posts", data.id], data)
queryClient.invalidateQueries({ queryKey: ['posts']})
},
onMutate: (variables) => {}, // onMutate will be called before the mutationFn
onError: (error, variables, context) => {},
onSettled: (data, error, variables, context) => {},
})
const BASE_URL = "http://localhost:3000/";
const axiosInstance = axios.create({baseURL: BASE_URL});
export const createPost = ({ title, body }: {title: string, body: string }) => {
return axiosInstance
.post("posts", {
title,
body,
userId: Math.floor(Math.random() * 5) + 1, // To assign a random user from the list of 5
id: String(Date.now()),
})
.then(res => res.data)
}
Now we can use the actual mutate function from the createPostMutation to update the data
createPostMutation.mutate({
title: titleRef.current.value,
body: bodyRef.current.value,
});
We can also access the other states such as error and pending.
```
### 3) ```Parallel Queries```
### 4) ```Dependent Queries```
- One query depends the other
- Based on the ```enabled``` parameter
### 5) ```useInfiniteQuery```
Read the official docs here for more details