如何向 useLazyQuery 添加回调

Question

我正在做教程 - https://www.apollographql.com/docs/react/data/queries/使用懒惰的 graphQL。我有一个功能，可以让我通过单击按钮获取数据，并对服务器进行延迟查询。我将匿名函数包装起来并放到 onClick 按钮上。你能帮我在 getDog 的回调中添加另一个函数，在 useLazyQuery 完成后添加一些动作。

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);  

我试过

const [getDog, { loading, data }] = {
    useLazyQuery(CUSTOM_GQL);
    return // some actions with data and return;
}

不编译

<button onClick={
   () => {
      getDog();
      return // some actions
          }
        }

某些操作仅在第二次单击后才有效。

Answer 1

'Classic' 回调可以在钩子内定义（见API 规范）

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO, {
  onCompleted: (data) => {
    // some actions
  }
});

return (
  <button onClick={ () => getDog() ) 

...但是在反应和功能组件（带有钩子）中，组件功能在更改时重新运行以更新视图

const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);  

if( data ) {
  // 'callback'
}

...但此代码可以多次运行（通过其他更改）...您可以使用useEffect钩子避免这种情况：

useEffect(() => {
  // code run only on every `data` change
  if( data ) {
    // only when `data` not empty - after first and futher data loading
  }
}, [data]);