3

我的代码如下所示：

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

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

4

2 回答 2

5

放在QueryClientProvider你的反应应用程序的根目录。

我猜在索引文件中。

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

如果您不想将其保留在 index 中，至少它应该在与您使用的地方不同的父函数中useQuery，useMutation或者任何钩子中。

于 2021-01-30T21:25:04.097 回答
0

我从他们关于使用查询客户端的官方文档中找到了这一点，只需转到您的根文件，可能是 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'))
于 2021-07-02T08:37:30.290 回答