Apollo-Client-Cache

Question

Ich habe gerade angefangen, Apollo-Client auf einer React-Anwendung zu verwenden, und ich bin auf Zwischenspeicherung fest. Ich habe eine Homepage mit einer Liste von Produkten, wo ich eine Abfrage, um die ID und den Namen dieser Produkte und eine Produktseite, wo ich Abfrage für die ID, Name, Beschreibung und Bild.

Ich möchte, dass wenn ein Benutzer die Homepage zuerst besucht, dann eine bestimmte Produktseite, nur eine Abfrage für die Beschreibung und das Bild des Produkts, auch den Namen während des Ladens anzeigen (da ich es bereits zwischengespeichert haben sollte). Ich folgte der "Kontrolle des Ladens" Teil der Dokumentation (http://dev.apollodata.com/react/cache-updates.html) aber konnte es immer noch nicht lösen.

Die Abfrage, die durchgeführt wird, wenn wir auf die Produktseite gehen, fragt immer noch nach der ID und dem Namen des Produkts, während sie zwischengespeichert werden sollten, da ich bereits danach gefragt habe.

Ich denke, ich vermisse etwas, aber ich kann es nicht herausfinden. Hier ist ein Bit des Codes:

// Create the apollo graphql client. 
const apolloClient = new ApolloClient({ 
    networkInterface: createNetworkInterface({ 
     uri: `${process.env.GRAPHQL_ENDPOINT}` 
    }), 
    queryTransformer: addTypename, 
    dataIdFromObject: (result) => { 
     if (result.id && result.__typename) { 

      console.log(result.id, result.__typename); //can see this on console, seems okey 
      return result.__typename + result.id; 
     } 

     // Make sure to return null if this object doesn't have an ID 
     return null; 
    }, 
}); 

// home page query 
// return an array of objects (Product) 
export default graphql(gql` 
    query ProductsQuery { 
     products { 
      id, name 
     } 
    } 
`)(Home); 

//product page query 
//return an object (Product) 
export default graphql(gql` 
    query ProductQuery($productId: ID!) { 
     product(id: $productId) { 
      id, name, description, image 
     } 
    } 
`,{ 
    options: props => ({ variables: { productId: props.params.id } }), 
    props: ({ data: { loading, product } }) => ({ 
     loading, 
     product,}) 
})(Product); 

Und meine Konsole Ausgabe:

Answer 1

Die Antwort auf Ihre Frage hat eigentlich zwei Teile:

1. Der Kunde nicht kann eigentlich sagen, dass diese Abfragen auf das gleiche Objekt im Cache auflösen, weil sie einen anderen Pfad haben. Eine beginnt mit products, die andere mit product. Es gibt einen open PR für clientseitige Resolver, mit dem Sie dem Client Hinweise geben können, wo im Cache Dinge zu finden sind, auch wenn Sie nicht explizit danach gefragt haben. Ich erwarte, dass wir dieses Feature innerhalb einer oder zwei Wochen veröffentlichen werden.

2. Auch mit clientseitigen Resolvern wird Apollo Client nicht genau das tun, was Sie oben beschrieben haben, da Apollo Client seit Version 0.5 keine Abfragen mehr durchführt. Stattdessen sind alle Abfragen jetzt vollständig statisch. Das bedeutet, dass die vollständige Abfrage auch dann an den Server gesendet wird, wenn sich Ihre Abfrage teilweise im Cache befindet. Dies hat eine Reihe von Vorteilen, die in dieser blog post dargelegt sind.

Sie noch in der Lage sein, den Teil anzuzeigen, die zuerst im Cache ist, durch returnPartialData: true in den Optionen einstellen.