Apollo query has the wrong data from cache

Question

Apollo query has the wrong data from cache in my react app.

If I set query's fetchPolicy to 'network-only', everything work properly.

So I think it is a cache problem.

I have been working hard trying to solve the problem and see articles about apollo cache, but I still can't solve the problem.

Here are my results after querying:

parameter memberId is null (result is correct)

[
  {
    "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"
        }
      }
    ]
  }
]

parameter memberId is 9 (result is correct)

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

parameter memberId is 1 (result is correct)

[
  {
    "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"
        }
      }
    ]
  }
]

but when I back to parameter is null the result is wrong

[
  {
    "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"
        }
      }
    ]
  }
]

Member B (id = 9) is disappear..

and I back to parameter is 9 (result is wrong)

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

I get the Member A's data instead of Member B

Can someone help me? Thanks

---

My client configuration (cache is InMemoryCache)

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

I use queryHook to wrap my component

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

Also I use Query tag(other data) to wrap my content

and its parameter is memberId as well.

the structure like this

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

I don't know if this is specific enough

Let me know if this is not specific enough

Thanks

---

2019-09-16

For those who facing the same problem:

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

Answer 1

You need to have different ids for that type on the returned results for your query. For example, you have different results for id 87 based on memberId, so the cache will be overwritten by your second query and since apollo does not refetch queries already made by default it will continue to look at the overwritten result.