私のアプリには、「保存された検索」のリストを含むサイドバーと、検索結果を表示する中央の領域があります。保存された検索リンクをクリックするたびに、その検索結果で中央エリアを更新したいと考えています。
apollo-react でこれを行う適切な方法は何ですか?
私はこれで試しました:
// SidebarConnector.js:
const withVideoSearch = graphql(
VIDEO_SEARCH_QUERY,
{
name: 'videoSearchQuery',
props: ({ videoSearchQuery }) => {
return ({
searchVideos: videoSearchQuery.refetch,
});
},
}
);
export default withVideoSearch(Sidebar);
私の保存された検索はsearchVideos({ query: "some query" })
、上記に基づいて、VIDEO_SEARCH_QUERY
さまざまな変数を使用してクエリの再フェッチを行っているオンクリックを実行しています。これは正常に機能し、graphql サーバーに対して呼び出しが行われ、結果が正常に返されます。
私が使用する結果のリストを表示するメイン コンポーネントの場合:
export default graphql(VIDEO_SEARCH_QUERY)(ResultList);
最初に、メイン コンポーネントは、あたかも変数なしでクエリが実行されたかのように、サーバーから結果を取得します。
問題は、すべての再フェッチが apollo のストアに異なるエントリを作成するように見えROOT_QUERY
、メイン コンポーネントが変数のないエントリに「ロック」されていることです。
最初のフェッチと、保存された検索からトリガーされた再フェッチの 1 つ後の apollo のストアは次のようになります。
ROOT_QUERY
searchVideos({"query":"coke"}): [Video]
0:▾Video:arLaecAu5ns
searchVideos({"query":null}): [Video]
0:▾Video:3HXg-oVMA0c
だから私の質問は、メインコンポーネントを「現在の検索」に切り替える方法、または更新ごとにストアを上書きして、メインコンポーネントが正しく更新されるようにキーが1つだけになるようにする方法です。
完全を期すために、ここに私のものがありますVIDEO_SEARCH_QUERY
:
export const VIDEO_SEARCH_QUERY = gql`
query searchVideos($query: String) {
searchVideos(query: $query) {
...fVideo
}
}
${fVideo}
`;