reactjs 如何根据应用程序的状态有条件地将DocumentNode参数传递给useLazyQuery钩子？

taor4pac 于 2023-01-02 发布在 React

关注(0)|答案(1)|浏览(100)

我尝试使用useLazyQuery钩子调用不同类型的查询，具体取决于应用程序中的某些状态更改。是否有办法在不使用DocumentNode的情况下初始化useLazyQuery（），然后传递DocumentNode参数并调用查询？
为了进一步解释，这里是我的代码解释我希望实现什么。

export const Interactions: React.FC<interactionsProps> = ({}) => {
  const [state, dispatch] = useReducer(InteractionListReducer, null);
  const { data: usersData } = useUsersQuery();
  const { data: filters } = useGet_FiltersQuery();

 const  [getInteractions,{data: interactionData, refetch: refetchInteraction, fetchMore}] = useLazyQuery()
// useLazyQuery REQUIRES A DOCUMENTNODE (QUERY AS PARAMETER) BUT I DO NOT KNOW THE TYPE OF QUERY YET
  
  useEffect(() => {
    if (state?.filterSelected?.id) {
      //THIS RETURNS THE DOCUMENT NODE BASED ON THE FILTER SELECTED
      const queryNode = getInteractionsQueryType(state.filterSelected.system); 

      //THEN HERE I WANT TO CALL THE HOOK WITH THE DOCUMENTNODE THAT I JUST OBTAINED 
       getInteractions({query: queryNode  })

    }
  }, [state?.filterSelected?.id]);

是否可以使用useLazyQuery钩子来实现这一点？如果不能，是否有替代方案来实现这种查询取决于应用程序的状态？

reactjs

来源：https://stackoverflow.com/questions/74971537/how-do-i-conditionally-pass-the-documentnode-parameter-to-a-uselazyquery-hook-de

1条答案

按热度按时间

guicsvcw1#

钩子的规则之一是在一个组件中运行的钩子的数量不应该改变，也就是说，不应该有条件地运行一个钩子。
记住这一点：
1.在运行查询之前不要呈现组件：

{readyForInteractions ? <Interactions /> : null }

1.在useLazyQuery中使用您想要的任何查询，甚至是根据状态而变化的查询
作为进一步的优化：
1.将两个查询合并为一个，例如：

query interactions {
  useUsers {
    field1
    field2
  }
  useGetFilters {
    fieldA
    fieldB
  }
}

这将使处理loading和error状态变得简单得多，同时还消除了冗余的网络请求。
1.最后，如果您的查询仅根据其参数进行更改，请使用查询变量来运行它们，而不是将变量直接注入到查询文本中-就像您在使用getInteractionsQueryType(state.filterSelected.system)时所做的那样

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 如何根据应用程序的状态有条件地将DocumentNode参数传递给useLazyQuery钩子？

1条答案

相关问题

热门标签

最新问答