☰

useLazyQuery() を使用してクリックごとにクエリを実行する方法 質問する

tag-icon • tag-icon reactjs react-apollo apollo-client react-apollo-hooks
useLazyQuery() を使用してクリックごとにクエリを実行する方法 質問する

useLazyQuery()フックを使用すると@apollo/react-hooks、ボタンのクリック時にクエリを実行できました。ただし、連続したクリックで同じクエリを実行することはできません。

export default ({ queryVariables }) => {
  const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, {
    variables: queryVariables
  });

  return <div onClick={sendQuery}>Click here</div>;
}

上記では はsendQuery1 回だけ実行されます。

ベストアンサー1

useLazyQuery は、キャッシュファーストのデフォルトのネットワークポリシーを使用します。したがって、onClick 関数は実際に実行されると思いますが、返される値はキャッシュにあった値であるため、React はデータの変更に気付かず、状態は更新されません。返されるデータは既にあるものなので、再レンダリングされず、変更されていないように見えます。次のような別のネットワークポリシーを渡すことをお勧めします。

  const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, {
    variables: queryVariables,
    fetchPolicy: "network-only"
  });

これは、APIから最新の情報を取得する必要があることを意味します。したがって、基本的にキャッシュは不要です。他のオプションを試して、どれが最適かを確認することもできます。cache-and-network:詳細については、こちらをご覧ください。アポロフェッチポリシーの理解

おすすめ記事