react-query

react-query的使用

是强大的异步状态管理，我的理解是将 一些小颗粒度的状态管理，简单化。是对react-redux的补充。核心分为：1、创建。2、请求数据缓存 3 、更新使用缓存

1安装

 npm i react-query -s

2 使用

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // 1、创建 Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  //2、请求 Queries
  const query = useQuery('todos', getTodos)

  //3、更新 Mutations
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries('todos')
    },
  })

  return (
    <div>
      <ul>
        {query.data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate()
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

//useful client at Components
const queryClient = useQueryClient();
let data = queryClient.getQueryData('getListData')

render(<App />, document.getElementById('root'))