如何使用带有 React-Query 的 prefetchQuery 预取数据

Question

我正在尝试使用 react-query prefetchQuery 预取数据。当我检查 browser DevTools 网络选项卡时，我可以看到为 prefetchQuery 请求的数据来自后端，但由于某种原因，当我查看 [=21] =]react-query DevTools 它确实在缓存中生成 key 但由于某种原因 Data 不存在。让我知道我做错了什么。

import { useState, useEffect } from 'react';
import { useQuery, useQueryClient } from 'react-query';
import axios from 'axios';

const baseURL = process.env.api;

async function getSubCategoryListByCategoryId(id) {
  // await new Promise((resolve) => setTimeout(resolve, 300));
  console.log(`${baseURL}/category/subcategories/${id}`);
  try {
    const { data } = await axios.request({
      baseURL,
      url: `/category/subcategories/${id}`,
      method: 'get',
    });
    console.log('data getSubCategoryListByCategoryId index: ', data);
    return data;
  } catch (error) {
    console.log('getSubCategoryListByCategoryId error:', error);
  }
}

// const initialState = {

// };

const ProductCreate = () => {
  const [values, setValues] = useState(initialState);

  const queryClient = useQueryClient();

  const { data, isLoading, isError, error, isFetching } = useQuery(
    'categoryList',
    getPosts
  );

  const dataList = JSON.parse(data);

  useEffect(() => {
    setValues({ ...values, categories: dataList });

    dataList.map((item) => {
      console.log('useEffect values.categories item.id: ', item._id);
      queryClient.prefetchQuery(
        ['subCategoryListByCategoryId', item._id],
        getSubCategoryListByCategoryId(item._id)
      );
    });
  }, []);

  return <h1>Hello</h1>;
};

export default ProductCreate;

Answer 1

prefetchQuery 的第二个参数需要一个函数来获取数据，类似于传递给 useQuery 的 queryFn。

但是在这里，您正在调用该函数，从而将其结果传递给 prefetchQuery:

getSubCategoryListByCategoryId(item._id)

如果你想这样做，你可以 manually prime the query 通过 queryClient.setQueryData，它接受一个键和传递给它的键的数据。

否则，修复可能只是：

() => getSubCategoryListByCategoryId(item._id)

如何使用带有 React-Query 的 prefetchQuery 预取数据

How to pre-fetch data using prefetchQuery with React-Query

javascript

reactjs

next.js

react-query