如何强制 Apollo Client 使用缓存数据

Question

我们有一个最初加载小部件列表的应用程序：

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

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

fragment WidgetInterface on WidgetInterface {
    id
    name
    description
    type
}

稍后我渲染这个小部件，其中每个反应组件都用另一个 graphql 调用包装，以获取单个小部件的数据。当我们最初获取这些数据时，我希望 apollo 从本地存储获取数据，但它总是调用服务器

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

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

所以有没有办法检查为什么 apollo 不使用缓存的？

Answer 1

Apollo 通过查询缓存您的查询结果。它从服务器而不是缓存中获取数据的原因是，第一次呈现组件时，您从未进行过 widgetDetails 查询，只有 widgets 一次。

如果您想避免进行 widgetDetails 查询，您可以将您的组件设置为使用 widgets 查询，并自行按 id 过滤结果。类似于：

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

如何强制 Apollo Client 使用缓存数据

How to force Apollo Client to use cached data

apollo

react-apollo

apollo-client