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

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

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

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

fragment WidgetInterface on WidgetInterface {
    id
    name
    description
    type
}

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

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

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

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

Apollo 按查询缓存您的查询结果。它从服务器而不是缓存中获取数据的原因是，第一次渲染组件时，您从未制作过widgetDetails查询，只有一个widgets one.

如果您想避免widgetDetails查询，您可以设置您的组件以使用widgets改为查询并自己按 id 过滤结果。就像是：

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