Quick Start

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

• Queries
• Mutations
• Query Invalidation

1 import { useQuery, useMutation, queryCache } from 'react-query'
2 import { getTodos, postTodo } from '../my-api'
3 
4 function Todos() {
5   // Queries
6   const todosQuery = useQuery('todos', getTodos)
7 
8   // Mutations
9   const [addTodo] = useMutation(postTodo, {
10     onSuccess: () => {
11       // Query Invalidations
12       queryCache.invalidateQueries('todos')
13     },
14   })
15 
16   return (
17     <div>
18       <ul>
19         {todosQuery.data.map(todo => (
20           <li key={todo.id}>{todo.title}</li>
21         ))}
22       </ul>
23 
24       <button
25         onClick={() =>
26           addTodo({
27             id: Date.now()
28             title: 'Do Laundry',
29           })
30         }
31       >
32         Add Todo
33       </button>
34     </div>
35   )
36 }

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.