Apollo 查询从缓存中获取了错误的数据

Question

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

如果我将查询的 fetchPolicy 设置为“仅网络”，则一切正常。

所以我认为这是一个缓存问题。

一直在努力解决问题，看到了关于apollo cache的文章，还是解决不了问题。

以下是我查询后的结果：

参数 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

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