React Query - 无法通过“getQueryData”访问数据，始终返回未定义

Question

我是第一次尝试 React Query，我写了这个：

export function Component(): JSX.Element {
  const queryClient = new QueryClient()

  const { data } = useQuery<DataType>({
    queryKey: "myKey",
    queryFn: () => ....,
  })

  const sameData: DataType| undefined = queryClient.getQueryData("myKey")

  return (
    <>
      {console.log(data)}
      {console.log(sameData)}
      <p>Loaded, see console for values.</p>
    </>
  )
}

数据对象是按预期创建的，但我似乎无法使 sameData 返回除未定义之外的任何内容。我知道这意味着 React Query 找不到我的密钥。有人对如何解决这个问题有任何想法吗？

Answer 1

您\xe2\x80\x99在每个渲染中创建一个新的QueryClient，因此您\xe2\x80\x99将获得一个新的缓存。查看文档首页上的示例：https ://react-query.tanstack.com/overview

\n

您需要一个稳定的queryClient，并将其放入QueryClientProvider中

\n

Answer 2

就像上面的答案解释的那样

const queryClient = new QueryClient() 

将在每次渲染时创建一个新实例

提供的useQueryClient()钩子返回当前实例

const queryClient = useQueryClient()