Quick Start

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

• Queries
• Mutations
• Query Invalidation

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