如何使用 prefetchQuery 和 React-Query 预取数据答案

【问题标题】：How to pre-fetch data using prefetchQuery with React-Query如何使用 prefetchQuery 和 React-Query 预取数据
【发布时间】：2021-04-27 06:36:47
【问题描述】：

我正在尝试使用 react-query prefetchQuery 预取数据。当我检查 browser DevTools 网络选项卡时，我可以看到为 prefetchQuery 请求的数据来自后端，但由于某种原因，当我查看 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;

【问题讨论】：

标签： javascript reactjs next.js react-query

【解决方案1】：

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

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

getSubCategoryListByCategoryId(item._id)

如果你想这样做，你可以通过queryClient.setQueryDatamanually prime the query，它接受一个密钥并将该密钥的数据传递给它。

否则，修复可能只是：

() => getSubCategoryListByCategoryId(item._id)

【讨论】：