This example very briefly illustrates the 3 core concepts of React Query:
import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from 'react-query'import { getTodos, postTodo } from '../my-api'
// Create a clientconst queryClient = new QueryClient()
function App() { return ( // Provide the client to your App <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> )}
function Todos() { // Access the client const queryClient = useQueryClient()
// Queries const query = useQuery('todos', getTodos)
// Mutations const mutation = useMutation(postTodo, { onSuccess: () => { // Invalidate and refetch queryClient.invalidateQueries('todos') }, })
return ( <div> <ul> {query.data.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul>
<button onClick={() => { mutation.mutate({ id: Date.now(), title: 'Do Laundry', }) }} > Add Todo </button> </div> )}
render(<App />, document.getElementById('root'))
These three concepts make up most of the core functionality of React Query. The next sections of the documentation will go over each of these core concepts in great detail.
Fast track your learning and
take the offical React Query course ↗️
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.