如何解决 No QueryClient set，使用 QueryClientProvider 在 React Query v3 中设置一个答案

【问题标题】：How to tackle No QueryClient set, use QueryClientProvider to set one in React Query v3如何解决 No QueryClient set，使用 QueryClientProvider 在 React Query v3 中设置一个
【发布时间】：2021-01-30 20:34:31
【问题描述】：

我的代码如下所示：

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

我正处于完全放弃图书馆并求助于其他选择的边缘。

【问题讨论】：

你能把 QueryClientProvider 放在你的 react 应用的根目录下试试。我猜在索引文件中。
@SangamRajpara 是的，成功了。如果您将其添加为答案。

标签： reactjs react-query

【解决方案1】：

将 QueryClientProvider 放在你的 react 应用的根目录下。

我猜在索引文件中。

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

如果您不想将其保留在索引中，至少它应该在父函数中与您使用 useQuery、useMutation 或任何钩子的位置不同。

【讨论】：

【解决方案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'))

【讨论】：