快速入门

1import {2  useQuery,3  useMutation,4  useQueryClient,5  QueryClient,6  QueryClientProvider,7} from 'react-query'8import { getTodos, postTodo } from '../my-api'9 10// 创建一个 client11const queryClient = new QueryClient()12 13function App() {14  return (15    // 提供 client 至 App16    <QueryClientProvider client={queryClient}>17      <Todos />18    </QueryClientProvider>19  )20}21 22function Todos() {23  // 访问 client24  const queryClient = useQueryClient()25 26  // 查询27  const query = useQuery('todos', getTodos)28 29  // 修改30  const mutation = useMutation(postTodo, {31    onSuccess: () => {32      // 错误处理和刷新33      queryClient.invalidateQueries('todos')34    },35  })36 37  return (38    <div>39      <ul>40        {query.data.map((todo) => (41          <li key={todo.id}>{todo.title}</li>42        ))}43      </ul>4445      <button46        onClick={() => {47          mutation.mutate({48            id: Date.now(),49            title: 'Do Laundry',50          })51        }}52      >53        Add Todo54      </button>55    </div>56  )57}58 59render(<App />, document.getElementById('root'))