Apollo query has the wrong data from cache - node.js

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.

Answer 2

#Anymore - can we see you FETCH_MEMBER_LIST_QUERY code? Are you fetching id's for all the data? Without the ids it won't be able to match relations.
Have you tried using Apollo Client DevTools - they will let you easily view the contents of the cache. It can be found on GitHub here and the Chrome Webstore here
Using this you will be able to see if the item is being cached correctly.