如何解决未设置 QueryClient 问题，使用 QueryClientProvider 在 React Query v3 中设置一个

Question

我的代码如下所示：

import { useQuery, QueryClientProvider, QueryClient } from 'react-query'
import React from 'react'

const queryClient = new QueryClient()

const fetchData = async () => {
  return (await fetch(`http://jservice.io/api/random?count=50`)).json()
}

function App() {

  const [isLoading, error, data] = useQuery('qa', fetchData)

  console.log(data)


  return (

    <QueryClientProvider client={queryClient}>
      <div className="App">
      </div>
    </QueryClientProvider>

  );
}

export default App;

我使用了 React Query v3 中的确切示例，但仍然得到

Error: No QueryClient set, use QueryClientProvider to set one

我正处于完全放弃图书馆并求助于替代品的边缘。

Answer 1

将 QueryClientProvider 放在你的 React 应用程序的根目录下。

我猜在索引文件中。

此时函数尝试运行挂钩 useQuery 挂钩查询客户端缓存未初始化，这将触发该错误。

如果您不想将它保留在索引中，至少它应该在父函数中，而不是在您使用 useQuery、useMutation 或任何挂钩的地方。

Answer 2

我从他们关于使用查询客户端的官方文档中找到了这个，只需转到您的根文件，也许 App.js 或 Index.js 并用

将其包装起来

     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>

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 (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

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

  // Queries
  const query = useQuery('todos', getTodos)

  // 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({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

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

如何解决未设置 QueryClient 问题，使用 QueryClientProvider 在 React Query v3 中设置一个

How to tackle No QueryClient set, use QueryClientProvider to set one in React Query v3

reactjs

react-query