apollo react: richtiger Weg die Parameter einer Abfrage zu wechseln

Question

In meiner App habe ich eine Sidebar mit einer Liste von "gespeicherten Suchen" und einem zentralen Bereich, der die Ergebnisse einer Suche anzeigen soll. Immer wenn ich auf einen gespeicherten Suchlink klicke, möchte ich den zentralen Bereich mit den Ergebnissen dieser Suche aktualisieren.

Was ist der richtige Weg, dies mit apollo-react zu tun?

ich mit dieser versucht:

// SidebarConnector.js: 
const withVideoSearch = graphql(
    VIDEO_SEARCH_QUERY, 
    { 
    name: 'videoSearchQuery', 
    props: ({ videoSearchQuery }) => { 
     return ({ 
     searchVideos: videoSearchQuery.refetch, 
     }); 
    }, 
    } 
); 
export default withVideoSearch(Sidebar); 

Meine gespeicherten Suchen ein searchVideos({ query: "some query" }) auf Klick tun, die, basierend auf der oben, wird einen erneuten Abruf für die VIDEO_SEARCH_QUERY Abfrage mit verschiedenen Variablen zu tun. Das funktioniert einwandfrei, der Aufruf wird an den graphql-Server gesendet und die Ergebnisse werden gut wiedergegeben.

Für die Hauptkomponente, die die Liste der Ergebnisse zeigt, die ich benutze:

export default graphql(VIDEO_SEARCH_QUERY)(ResultList); 

zunächst die Hauptkomponente die Ergebnisse vom Server als ob die Abfrage ohne Variablen geschehen wird, die genau in Ordnung ist, wie ich will es.

Das Problem ist, dass jedes Refetch scheint einen anderen Eintrag in ROOT_QUERY in Apollo-Shop zu erstellen und meine Hauptkomponente ist in dem einen ohne Variablen "gesperrt".

Hier ist, was Apollos Laden sieht aus wie nach dem ersten Abruf und einer des refetches aus einer gespeicherten Suche ausgelöst:

ROOT_QUERY 
    searchVideos({"query":"coke"}): [Video] 
    0:▾Video:arLaecAu5ns 
    searchVideos({"query":null}): [Video] 
    0:▾Video:3HXg-oVMA0c 

Also meine Frage ist, wie entweder die Hauptkomponente der „aktuelle Suche“ wechseln oder Wie überschreibt man den Speicher bei jeder Aktualisierung, so dass nur ein Schlüssel vorhanden ist, damit die Hauptkomponente korrekt aktualisiert wird.

Der Vollständigkeit halber hier ist mein VIDEO_SEARCH_QUERY:

export const VIDEO_SEARCH_QUERY = gql` 
    query searchVideos($query: String) { 
    searchVideos(query: $query) { 
     ...fVideo 
    } 
    } 
    ${fVideo} 
`; 

Answer 1

Vielleicht ist Ihr Anwendungsfall bin ich Missverständnis, aber es scheint, als gäbe es keine Notwendigkeit Refetch hier zu verwenden ist. Es wäre einfacher, die ausgewählte Suchzeichenfolge als Status beizubehalten, diesen Status als Prop zu Ihrer Hauptkomponente weiterzuleiten und dann diese prop als Variable in Ihrer GraphQL-Anfrage zu verwenden. So ist der graphql Anruf in Ihrer ResultList Komponente in etwa so aussehen würde:

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

Dann einfach Ihren onClick-Handler für jede gespeicherte Suche, um den Zustand festgelegt hat, was auch immer, dass Such-String ist, und Apollo wird den Rest erledigen. Mit Redux ist das ganz einfach - feuern Sie einfach die entsprechende Aktion ab. Wenn Sie Redux nicht verwenden, müssen Sie möglicherweise lift the state up, so kann es dann als Requisite weitergegeben werden, aber das Konzept ist das gleiche.