Tanstack-调用 fefetch 时查询缓存不起作用

Question

我在我的 React Native (Expo) 和 Firebase 项目中使用 @tanstack/react-query。我已经设置了所有必要的内容（例如 QueryClientProvider）。 由于未知原因，chrome 网络选项卡在 React Native 项目中不起作用。为此，我添加了第二行来确定 api 是否被调用。当我调用 refetch 函数时 “hello”一词被打印到控制台。 我猜缓存无法正常工作。这是我的代码。 👇🏼

  const getData = async () => {
    console.log("hello") // This is my debug line

    const userId = authUser.uid
    const userResponse = await getUser(userId)
    const lastExamResultsResponse = await getLastExamResults(
      userId,
      LAST_EXAMS_COUNT
    )

    return {
      user: userResponse,
      lastExamResults: lastExamResultsResponse,
    }
  }

  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["user"],
    queryFn: getData,
  })

我哪里做错了或者如何解决？

我想正确缓存我的数据。当缓存中有数据时，

refetch函数必须使用缓存数据。但这不起作用。

Answer 1

refetch 函数的作用与 invalidateQuery 相同。 它不是一个吸气剂，它的触发器。 您可以从 useQuery() 返回的“data”访问缓存的数据。 如果您想从其他组件访问缓存数据。使用具有相同密钥的 useQuery ，您将能够访问缓存的数据。与 {data}=useQuery 另一个选项是 queryClient.getQueryData(['user']) 也将返回缓存的数据。