Wie Apollo-Client zu zwingen, im Cache gespeicherten Daten verwenden

Question

Wir haben eine Anwendung, die zunächst eine Liste von Widgets laden:

query Widgets() { 
    widgets() { 
     ...Widgets 
    } 
} 

fragment Widgets on Widgets { 
    name 
    description 
    rootWidget 
    widgets { 
     ...WidgetInterface 
    } 
} 

fragment WidgetInterface on WidgetInterface { 
    id 
    name 
    description 
    type 
} 

später mir diese Widgets machen, wo jede Komponente reagiert mit einem anderen graphql Anruf eingewickelt zu bekommen die Daten für ein einzelnes Widget. Da wir diese Daten holen zunächst würde ich apollo erwarten, dass die Daten vom lokalen Speicher erhalten, aber es ist immer der Server Aufruf

#import '../fragments/WidgetInterface.graphql' 

query Widget($id: ID!) { 
    widgetDetails(id: $id) { 
     ...WidgetInterface 
    } 
} 

So ist es nicht weg zu überprüfen machen, warum apollo die im Cache gespeicherten diejenigen verwendet?

Answer 1

Apollo speichert Ihre Abfrageergebnisse nach Abfrage. Der Grund dafür, dass die Daten vom Server anstatt vom Cache abgerufen werden, besteht darin, dass Sie beim ersten Mal, wenn Sie Ihre Komponente rendern, keine widgetDetails Abfrage erstellt haben, sondern nur eine widgets.

Wenn Sie die Abfrage widgetDetails vermeiden möchten, können Sie stattdessen Ihre Komponente so konfigurieren, dass sie die widgets Abfrage verwendet, und filtern Sie einfach die Ergebnisse nach der ID selbst. Etwas wie:

graphql(WIDGETS_QUERY, { 
    props: ({data, ownProps}) => ({ widget: data.widgets.filter(w => w === ownProps.widgetId) }) 
})(MyComponent)