Quick Start

This example very briefly illustrates the 3 core concepts of React Query:

• Queries
• Mutations
• Query Invalidation

1 import { useQuery, useMutation, useQueryClient, QueryCache, QueryClient, QueryClientProvider } from 'react-query'
2 import { getTodos, postTodo } from '../my-api'
3 
4 // Create a cache
5 const cache = new QueryCache()
6 
7 // Create a client
8 const client = new QueryClient({ cache })
9 
10 function App() {
11   return (
12     // Provide the client to your App
13     <QueryClientProvider client={client}>
14       <Todos />
15     </QueryClientProvider>
16   );
17 }
18 
19 function Todos() {
20   // Access the client
21   const client = useQueryClient()
22 
23   // Queries
24   const todosQuery = useQuery('todos', getTodos)
25 
26   // Mutations
27   const [addTodo] = useMutation(postTodo, {
28     onSuccess: () => {
29       // Invalidate and refetch
30       client.invalidateQueries('todos')
31     },
32   })
33 
34   return (
35     <div>
36       <ul>
37         {todosQuery.data.map(todo => (
38           <li key={todo.id}>{todo.title}</li>
39         ))}
40       </ul>
41 
42       <button
43         onClick={() =>
44           addTodo({
45             id: Date.now(),
46             title: 'Do Laundry'
47           })
48         }
49       >
50         Add Todo
51       </button>
52     </div>
53   )
54 }
55 
56 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.