Apollo 查询有来自缓存的错误数据

Question

Apollo 查询在我的 React 应用程序中的缓存中有错误的数据。

如果我将查询的 fetchPolicy 设置为 'network-only'，一切正常。

所以我认为是缓存问题

一直在努力解决问题，看了apollo缓存的文章，还是无法解决问题

这是我查询后的结果：

参数memberId为空（结果正确）

[
  {
    "id": 87,
    "totalQuantity": 12,
    "Orders": [
      {
        "id": 1,
        "quantity": 11,
        "Member": {
          "id": 1,
          "name": "A"
        }
      },
      {
        "id": 28,
        "quantity": 1,
        "Member": {
          "id": 9,
          "name": "B"
        }
      }
    ]
  },
  {
    "id": 88,
    "totalQuantity": 1,
    "Orders": [
      {
        "id": 2,
        "quantity": 1,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  }
]

参数memberId为9（结果正确）

[
  {
    "id": 87,
    "totalQuantity": 1,
    "Orders": [
      {
        "id": 28,
        "quantity": 1,
        "Member": {
          "id": 9,
          "name": "B"
        }
      }
    ]
  }
]

参数memberId为1（结果正确）

[
  {
    "id": 87,
    "totalQuantity": 11,
    "Orders": [
      {
        "id": 1,
        "quantity": 11,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  },
  {
    "id": 88,
    "totalQuantity": 1,
    "Orders": [
      {
        "id": 2,
        "quantity": 1,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  }
]

但是当我返回参数为空时结果是错误的

[
  {
    "id": 87,
    "totalQuantity": 11,
    "Orders": [
      {
        "id": 1,
        "quantity": 11,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  },
  {
    "id": 88,
    "totalQuantity": 1,
    "Orders": [
      {
        "id": 2,
        "quantity": 1,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  }
]

会员 B (id = 9) 消失了..

而我返回的参数是9（结果是错误的）

[
  {
    "id": 87,
    "totalQuantity": 11,
    "Orders": [
      {
        "id": 1,
        "quantity": 11,
        "Member": {
          "id": 1,
          "name": "A"
        }
      }
    ]
  }
]

我得到的是会员A的数据，而不是会员B

有人可以帮助我吗？谢谢

我的客户端配置（缓存是InMemoryCache）

const client = new ApolloClient({
  link: ApolloLink.from([
    httpLink,
  ]),
  cache,
  dataIdFromObject: o => ${o.id}${o.__typename},
});

我使用 queryHook 来包装我的组件

const queryHook = graphql(FETCH_ORDER_GROUP_SHIPMENT_LIST, {
  options: ownProps => ({
  variables: {
    memberId: ownProps.options.memberId || null,
  },
}),
  props: ({
    data: {
      orderGroupShipmentList,
    },
  }) => ({
    orderGroupShipmentList: orderGroupShipmentList || [],
  });

我还使用查询标签（其他数据）来包装我的内容

参数也是memberId

这样的结构

<Query
  variables={{ memberId: options.memberId || null }}
  query={FETCH_MEMBER_LIST_QUERY}>
  content that use orderGroupShipmentList and memberList
</Query>

不知道够不够具体

如果不够具体请告诉我

谢谢

2019-09-16

遇到同样问题的朋友：

https://kamranicus.com/posts/2018-03-06-graphql-apollo-object-caching

Answer 1

@Anymore - 我们能看到你的 FETCH_MEMBER_LIST_QUERY 代码吗？您是否正在获取所有数据的 ID？如果没有 ID，它将无法匹配关系。

您是否尝试过使用 Apollo Client DevTools - 它们可以让您轻松查看缓存的内容。可以在 GitHub here and the Chrome Webstore here

上找到

使用它您将能够查看项目是否被正确缓存。

Answer 2

您需要在查询的返回结果中为该类型设置不同的 ID。例如，根据 memberId，您对 id 87 有不同的结果，因此缓存将被您的第二个查询覆盖，并且由于 apollo 不会重新获取默认情况下已经进行的查询，它将继续查看覆盖的结果。

Apollo 查询有来自缓存的错误数据

Apollo query has the wrong data from cache

node.js

apollo

reactjs

react-apollo

apollo-client