Question

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

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没有使用缓存的那些？

Answer 1

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

如果您想避免进行widgetDetails查询，可以将组件设置为使用widgets查询，而只是自己按ID过滤结果。类似的东西：

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

如何强制Apollo客户端使用缓存数据

1 个答案: