如何在反应中在单个功能组件中使用多个graphql查询钩子？答案

【问题标题】：How to use multiple graphql query hooks in single function component in react?如何在反应中在单个功能组件中使用多个graphql查询钩子？
【发布时间】：2020-08-05 02:43:25
【问题描述】：

我使用useQuery 调用多个graphql query。它显示错误，例如 Too many re-renders. React limits the number of renders to prevent an infinite loop. 我知道它为什么来，但我不知道如何防止这个错误。这是Functional components

我的代码在这里

  const [categoryList, updateCategoryList] = useState([]);
  const [payeeList, updatePayeeList] = useState([]);

  if (data) {
    const categories = (data.categories as unknown) as Category[];
    if (
      !isEqual(categoryList, categories) ||
      categoryList.length !== categories.length
    ) {
      updateCategoryList([...categories]);
    }
  }

  if (isEmpty(payeeList)) {
    const { loading, data } = useQuery(payeesQuery);
    if (data) {
      const payees = (data.payees as unknown) as Payee[];
      if (!isEqual(payeeList, payees) || payeeList.length !== payees.length) {
        updateCategoryList([...payees]);
      }
    }
  }

对不起，我菜鸟的反应。

【问题讨论】：

不要在函数或条件中调用钩子reactjs.org/docs/hooks-overview.html#rules-of-hooks
把这个写在组件的顶部。 const { 加载，数据 } = useQuery(payeesQuery);
只有一个graphql Query。对吗？
是的，我写了组件的顶部，并没有在函数内部使用....我的问题是如何在单个函数组件中使用多个 graphql 查询挂钩？
在上面的代码中，useQuery 是从if 条件内部调用的

标签： reactjs graphql react-hooks react-apollo react-functional-component

【解决方案1】：

例如，您可以像这样使用

const ExampleComponent = () => {
    const { loading:payeesLoading, data:payeesData } = useQuery(payeesQuery);
    const { loading:secondLoading, data:secondData } = useQuery(secondQuery);

    useEffect(() => { //effect hook for first query

    } ,[payeesData] )

    useEffect(() => { //effect hook for second query

    } ,[secondData] )

    return (<div>
    your contents
    </div>)

}

这样，您可以在单个组件中编写多个查询。

【讨论】：