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>
    </>
  )
}

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

Answer 1

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

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

Answer 2

就像上面解释的答案

const queryClient = new QueryClient() 

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

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

const queryClient = useQueryClient()