ApolloClientのuseLazyQueryでonCompletedが毎回動くようにしたいっ!

useLazyQueryを使うと任意のタイミングで、バシバシQueryを呼び出すことができるようになりますが、以下↓のように書いても思ったように動かなかったのでメモ。

const GET_USER = gql`
  query GetUser($id: Int!) {
    user(id: $id) {
      name
    }
  }
`;

const [loadUser] = useLazyQuery(
  GET_USER,
  {
    variables: {
      id: 1000
    },
    onCompleted: data => {
      console.log(data);
    }
  }
);

この↑状態で、loadUser()を呼べばonCompletedも同様に呼ばれる(もちろん結果が返ってきていれば)と思ったんですが、最初の1回だけ動いて以降は呼ばれないようです。

キャッシュ周りの設定だと思ったので、fetchPolicy: 'network-only'を追加してみるも挙動は変わらず。
で、色々試した結果notifyOnNetworkStatusChangeの設定が必要らしいです(defaultはfalse)

const [loadUser] = useLazyQuery(
  GET_USER,
  {
    variables: {
      id: 1000
    },
    onCompleted: data => {
      console.log(data);
    },
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'network-only'
  }
);

これでQueryをバシバシ呼んで、onCompletedもバシバシ実行できますね!

参考

onCompleted not called when useQuery refetch finished · Issue #3709 · apollographql/react-apollo