react-query - React Query 和处理多个文件中相同的查询行为

Question

这更像是一个架构问题。当我使用 redux-sages 时，我可以有一个“worker saga”来进行我的 api 调用（产量），当我的 3 个页面需要这个 bahavior 时，我会为它申请一个案例，它会在那些上运行页。

但我摆脱了所有这些，现在正在使用 react-query。但我很好奇人们是如何处理的，比如说，我有 3 个自定义 useQuery 调用......你如何将它们整合到几个页面中，这样你就不必欺骗这项工作了？

所以，让我们说现在我在fileA中有：

   const { status, data: { plans} } = useCustomQuery1();

   const { data: { client } } = useCustomQuery2({});
   const {
    data: { prices } = {} } = useCustomQuery3({
      enabled: client.id,
      id: client.id,
   });
   /* refetch: call later */
   const {refetch } = useCustomQuery3({
    id: client.id,
    config: {
      enabled: false
    }
  });

因此，在我的“fileA”中，我可以访问 refetch/prrices/plans/status 等...但是，如果我将其提取出来，那么我将使用另一个“queries.js”文件并命名为 ala ....

 // queries.js
 const useMySharedQueries1 = () => {

    const { status, data: { plans} } = useCustomQuery1();

    const { data: { client } } = useCustomQuery2({});
    const {
      data: { prices } = {} } = useCustomQuery3({
      enabled: client.id,
      id: client.id,
    });
   /* refetch: call later */
   const {refetch } = useCustomQuery3({
     id: client.id,
     config: {
     enabled: false
   }
   });

  return {
    refetch, prices, plans
  }

}

我觉得有更好的方法，更强大和简洁的方法来实现这一目标？我会使用“useQueries”，但那是否处理“重新获取”查询或需要“启用”等的查询，以及返回“所有数据”以便消费页面可以使用它呢？

标签： react-query