React 函数组件中的多个 useLazyQuery 钩子（Apollo 客户端）答案

【问题标题】：Multiple useLazyQuery hooks (Apollo Client) in React Function ComponentReact 函数组件中的多个 useLazyQuery 钩子（Apollo 客户端）
【发布时间】：2021-12-16 08:22:09
【问题描述】：

我正在尝试在我的函数组件中包含两个 Apollo-Client useLazyQuery 挂钩。任何一个都可以单独工作，另一个被注释掉，但是一旦我将两者都包含在内，第二个什么都不做。有什么想法吗？

export default function MainScreen(props) {

  useEffect(() => {
    validateWhenMounting();
  }, []);

  const [validateWhenMounting, { loading, error, data }] = useLazyQuery(
    validateSessionToken,
    {
      onCompleted: (data) => console.log('data', data),
    },
  );

  const [validate, { loading: loading2, error: error2, data: data2 }] =
    useLazyQuery(validateSessionTokenWhenSending, {
      onCompleted: (data2) => console.log('data2', data2),
    });


  const handleSendFirstMessage = (selectedCategory, title, messageText) => {
    console.log(selectedCategory, title, messageText);
    validate();
  };

【问题讨论】：

标签： reactjs react-hooks apollo

【解决方案1】：

想通了：在 onCompleted 之后添加键值对 fetchPolicy: 'network-only', 就可以了。似乎否则，由于缓存，没有进行任何查询......

【讨论】：

您也可以尝试使用null 组件来处理复杂的查询
您能详细说明一下吗？
当然，明天会做:)

【解决方案2】：

这是我在 cmets 中谈论和提到的模式：

const dummyComponent = () => {
  const [lazyQuery] = useLazyQuery(DUMMY_QUERY, {variables: dummyVariable,
   onCompleted: data => // -> some code here, you can also accept an state dispatch function here for manipulating some state outside
   onError: error => // -> you can accept state dispatch function here to manipulate state from outside
 });
  return null;
}

这也是你有时会需要的一种模式

【讨论】：

酷，谢谢！这会派上用场的，我敢肯定:)