Hello Guys, I am Dhruv Parmar. Let’s learn React Query together. If you like my content than plese give a star to this repository and also share with your friends.
React query is a very efficient query caching client for the front-end which can replace traditional methods of fetching data on the mounting stage of the component and global state management like Redux in some use cases. React Query is also known as missing data-fetching library for React. React Query does the data fetching, caching, synchroning and updating server state in React. React Query is the best library to manage server state data.
I recommend you all to read the official docs of React Query.
React Query gives us caching of server data out of the box with cache invalidation and request deduping.
Refer this blog why all shift’s to React Query ?
There are mainly three ways to handle the errors in the React Query :
Refer this blog for better understanding.
No, we cannot replace React Query and context api with Redux, because they are not the same thing.
React Query stores the cached data in memory. If you wanna store some additionally sync data somewhere else, than watch this plugin.
In overview, you will learn what is Server State, what are the issues after knowing Server State, how to install it, etc.
In order to know what is Server State, you must know the basics knownledge of Server States. In Server side state management, all the information or data is stored in memory. Server side state management is more secure than Client side state management. Where-else in client side state management, the data or information will be stored directly on client-side. This information can be from cookies, query string, etc.
Server states are totally different from client state. Initially, you must be aware of few things related to Server states:
After knowning what is server states, there are some challenges which will occurs/arise as you move further:
installation:
npm i @tanstack/react-query
for more details, please refer the official docs of React Query.
There are mainly three core concepts in React Query:
A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.
To subscribe queries in your components, useQuery() is used. It has two parameter’s:
For example
import { useQuery } from '@tanstack/react-query'
function App() {
const info = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
}
The unique key is used for refetching, caching, and sharing your queries with your application. A query can only be in one of the following states at any given moment:
isLoading or status === loadingisError or status === errorisSuccess or status === successThe query mostly depends on two states:
data: If the query is in success state, than the data is available through data property.error: If the query is in isError state, than the errors are available through error property.You can see something like this example in react query
function Todos() {
const { isLoading, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
if (isLoading) {
return <span>Loading...</span>
}
if (isError) {
return <span>Error: {error.message}</span>
}
// We can assume by this point that `isSuccess === true`
return (
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}
In addition to status field, there is also one other object field importances (i.e.: result). Just like the status field, fetchStatus has the same situations.
fetchStatus === fetchingfetchStatus === pausedfetchStatus === idlestatus state gives an information about data, it tells weather the data is available or not ?fetchStatus state gives an information about queryFn, it tells weather the queryFn is running or not.Mutations are used to create/update/delete data or perform server side modifications. useMutation() hook is used for Mutations. It excepts one parameter, that is mutationFn:
function App() {
const mutation = useMutation({
mutationFn: (newTodo) => {
return axios.post('/todos', newTodo)
},
})
return (
<div>
{mutation.isLoading ? (
'Adding todo...'
) : (
<>
{mutation.isError ? (
<div>An error occurred: {mutation.error.message}</div>
) : null}
{mutation.isSuccess ? <div>Todo added!</div> : null}
<button
onClick={() => {
mutation.mutate({ id: new Date(), title: 'Do Laundry' })
}}
>
Create Todo
</button>
</>
)}
</div>
)
}
Here, you can see mutate accepts the variable or object. The mutate function is an asynchronous function, which means you cannot use it directly in an event callback in React 16 and earlier. If you wanna access the event in onSubmit you need to wrap mutate in another function. This is due to React event pooling.
const CreateTodo = () => {
const mutation = useMutation({
mutationFn: (formData) => {
return fetch('/api', formData)
},
})
const onSubmit = (event) => {
event.preventDefault()
mutation.mutate(new FormData(event.target))
}
return <form onSubmit={onSubmit}>...</form>
}