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 const cache = new QueryCache()
5 const client = new QueryClient({ cache })
6 
7 function App() {
8   return (
9     <QueryClientProvider client={client}>
10       <Todos />
11     </QueryClientProvider>
12   );
13 }
14 
15 function Todos() {
16   // Cache
17   const client = useQueryClient()
18 
19   // Queries
20   const todosQuery = useQuery('todos', getTodos)
21 
22   // Mutations
23   const [addTodo] = useMutation(postTodo, {
24     onSuccess: () => {
25       // Query Refetch
26       client.refetchQueries('todos')
27     },
28   })
29 
30   return (
31     <div>
32       <ul>
33         {todosQuery.data.map(todo => (
34           <li key={todo.id}>{todo.title}</li>
35         ))}
36       </ul>
37 
38       <button
39         onClick={() =>
40           addTodo({
41             id: Date.now()
42             title: 'Do Laundry',
43           })
44         }
45       >
46         Add Todo
47       </button>
48     </div>
49   )
50 }
51 
52 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.