链接 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;

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

澄清一下，我想像这样在 Ui 中呈现数据：PartentCategoryA..subCategorya .PartentCategoryB..subCategoryb PartentCategoryC..subCategoryc 而不是 PartentCategoryA.PartentCategoryB PartentCategoryC .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 的“依赖查询”文档页面所说的（https://react-query.tanstack.com/guides/dependent-queries）：调用您需要的所有 useQuery 挂钩，但发送“启用：false”直到数据第一个正确接收。

否则有点复杂，因为一个组件总是必须以相同的顺序调用相同的钩子。所以在 if 语句之后你不能调用更多的钩子。

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

但是，React Query 推荐启用标志本身。

链接 reactQuery 调用

chaining reactQuery calls

javascript

reactjs

axios

react-query