apollo react：クエリのパラメータを切り替えるための適切な方法

Question

私のアプリでは、「保存された検索」のリストと検索結果を表示する中央エリアがあるサイドバーがあります。保存された検索リンクをクリックするたびに、その検索の結果を中心エリアに更新したいと考えています。

アポロ反応でこれを行う適切な方法は何ですか？私はこれを試してみました

：

// 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); 

最初のクエリは、私がしたい正確にどのように、細かいである変数を使用せずに行われていたかのような主要コンポーネントがサーバーから結果を取得しますそれ。

問題は、すべての再取得で、アポロの店舗内のROOT_QUERYに別のエントリが作成され、メインコンポーネントが変数なしのものに「ロック」されてしまうことです。ここで

は、最初のフェッチと再フェッチの一つは、保存した検索からのトリガ後にアポロの店舗は次のようになります。

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} 
`; 

Answer 1

たぶん私はあなたのユースケースを誤解していますが、ここで再フェッチを利用する必要はありませんように思えます。選択された検索文字列がどのようなものであっても状態を維持し、メインコンポーネントの小道具としてその状態を渡し、GraphProリクエストの変数としてその小道具を使用する方が簡単です。だからあなたのResultListコンポーネント内graphql呼び出しは次のようになります。

const options = props => ({ variables: { query: props.searchString } }) 
export default graphql(VIDEO_SEARCH_QUERY, { options })(ResultList); 

それからちょうどその検索文字列が何であれに状態を設定し、各保存された検索のためのあなたのonClickハンドラを持って、アポロは残りを行います。これはReduxで非常に簡単です。適切なアクションを実行してください。 Reduxを使用していない場合は、lift the state upにする必要がありますので、それを小道具として渡すことができますが、コンセプトは同じです。