ApolloClientのuseLazyQueryでonCompletedが毎回動くようにしたいっ!
2022年6月12日
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