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

Posted 2023-03-10

【中文标题】React 函数组件中的多个 useLazyQuery 钩子（Apollo 客户端）

【英文标题】：Multiple useLazyQuery hooks (Apollo Client) in React Function Component

【发布时间】：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();
  ;

【参考方案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;

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

【讨论】：

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