如何根据应用程序的 state 有条件地将 DocumentNode 参数传递给 useLazyQuery 挂钩？

Question

I am trying to call different type of queries using the useLazyQuery hook depending on certain state changes in my application. Is there a way to initialize useLazyQuery() without a DocumentNode and later pass the DocumentNode parameter and call the query?

To further explain here is my code explaining what I wish to achieve.

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]);

Is it possible to achieve this using useLazyQuery hook? If not is there an alternative to achieve this kind of querying depending on the state of application?

Answer 1

One of the rules of hooks is that the number of hooks run inside a component should not change, ie don't conditionally run a hook.

With that in mind:

1. Don't render your component until there's a query to be run:

{readyForInteractions ? <Interactions /> : null }

2. Use whatever query you want in useLazyQuery , even one that varies based on state

And as a further optimization:

3. Combine your two queries into one, ex:

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

This will make dealing with loading and error states much simpler while also eliminating a redundant.network request.

4. Finally, if your queries are only changing based on their parameters, use query variables to run them instead of injecting variables straight into the query text - as it appears you may be doing with getInteractionsQueryType(state.filterSelected.system)