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