链接reactQuery调用

Question

我在制作一些 useQuery 链接获取数据时遇到问题，我已经询问过但无法使其工作，

有一个我想从 API 获取的类别列表， axios.get("categories") 然后我想根据类别列表获取子类别： axios.get("tutorials/{categoriesName}")

我想使用 UseQuery 钩子，这样我就可以处理缓存并停止不必要的重新渲染，我已经通过简单的 useEffect 完成了这一点，但网站渲染速度很慢，所以我想学习 useQuery 方法，

function AllCategories() {
  const { isLoading, error, data, isFetching } = useQuery("categories", () =>
    axios.get("/categories").then((res) => res.data)
  );
  console.log(data);
  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;


//there are like 5 MAIN categories which i have used useQuery to fetch and handle Caching ,
//here i want to get the subcategories from each Main Category , can i chain useQueries ?



 return (
    <div>
      {data.map((item) => {
        return <div>{item.name}</div>;
      })}
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsClose />
    </div>
  );
}

export default AllCategories;

我不知道解决这个问题的正确方法，因为没有一个示例具有多个链接的依赖 useQueries，我不确定即使这是否可能，

只是为了澄清，我想像这样在 Ui 中呈现数据： PartentCategoryA..subCategorya .PartentCategoryB..subCategoryb PartentCategoryC..subCategoryc 而不是 PartentCategoryA.PartentCategoryB PartentCategoryC .subCategoryC .subCategorya ...subCategoryb ..subCategoryc 这就是使这项任务比它更难的原因应该

这是没有reactQuery的：

export default function AllCategoriesPage() {
  const [categories, setCategories] = useState([]);
  const [finalList, setFinalList] = useState([]);

  useEffect(() => {
    axios.get("/categories").then((response) => {
      setCategories(response.data);
    });
  }, [categories.length]);

  useEffect(() => {
    setFinalList(categories);
    categories.map(async (category) => {
      await axios
        .get(`/categories/${category.name}`)
        .then((res) => {
          const mysub = res.data;
          category.subCategories = mysub;
        })
        .then(() => {
          setFinalList([...categories]);
        });
    });
  }, [categories.length]);

  return (
    <div className="allCategoriesPage-wrapper">
      {finalList.length === 0 && (
        <div className="loader-container">
          <Loader />
        </div>
      )}
      <div className="allCategoriesPage-container">
        {finalList.length > 0 &&
          finalList.map((category) => {
            return (
              <React.Fragment>
                <div className="single-category-wrapper-main-cat ">
                  {category.name}
                </div>
                {category.subCategories &&
                  category.subCategories.map((subcategory) => {
                    return (
                      <Link to={`/categories/${subcategory.name}`}>
                        <div className="single-category-wrapper">
                          {subcategory.name}
                          <div className="single-category-img-container">
                            <img
                              className="single-category-image"
                              src={`http://localhost:3001/tutorials/${subcategory.name}/avatar`}
                            ></img>
                          </div>
                        </div>
                      </Link>
                    );
                  })}
              </React.Fragment>
            );
          })}
      </div>
    </div>
  );
}

提前致谢

Answer 1

一个好的方法是使用 React Query 的“Dependent Queries”文档页面（https://react-query.tanstack.com/guides/dependent-queries）：调用您需要的所有 useQuery 挂钩，但发送“enabled” : false”，直到正确接收到第一个数据。

否则会有点复杂，因为组件总是必须以相同的顺序调用相同的钩子。因此，在 if 语句之后，您无法调用进一步的钩子。

另一种解决方案是将代码拆分为更小的组件，每个组件都有一个 useQuery 调用。在这种情况下，您可以将函数中的所有内容大致拆分finalList.map()为自己的组件，然后可以对 useQuery 进行第二次调用来获取子类别。等等。乍一看似乎很奇怪，但很高兴它产生了非常紧凑的组件。

但是，React Query 建议启用启用标志本身。