如何根據應用程序的 state 有條件地將 DocumentNode 參數傳遞給 useLazyQuery 掛鈎？

Question

我正在嘗試根據應用程序中的某些 state 更改使用 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 掛鈎實現此目的？ 如果沒有，是否有一種替代方法可以根據應用程序的 state 實現這種查詢？

Answer 1

鈎子的規則之一是組件內部運行的鈎子數量不應該改變，即不要有條件地運行一個鈎子。

考慮到這一點：

1. 在運行查詢之前不要渲染你的組件：

{readyForInteractions ? <Interactions /> : null }

2. 在useLazyQuery中使用任何你想要的查詢，甚至是基於 state 而變化的查詢

作為進一步的優化：

3. 將您的兩個查詢合並為一個，例如：

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

這將使處理loading和error狀態變得更加簡單，同時也消除了冗余的網絡請求。

4. 最后，如果您的查詢僅根據其參數發生變化，請使用查詢變量來運行它們，而不是將變量直接注入查詢文本 - 看起來您可能正在使用getInteractionsQueryType(state.filterSelected.system)