'Apollo TypePolicies: Custom Merge function in cached field breaks pagination
I want to be able to overwrite one of the fields in ListItem when a ListItem of the same Id comes in from my middleware. The issue is that if I create a custom merge function for any field it makes my pagination stop working. The new data is not properly merged in the list of results.
When I console.log in the resultPagination merge-function it seems to merge properly. But, in my interface where I am calling resultPagination the state is stuck on loading. So, in other words, I can fetch the first page of results, but when I call fetchMore I get stuck on loading.
If I remove the custom merge function in ListItem the pagination starts working properly again. If I don't define a merge for any specific fields in ListItem, but just define merge as true the pagination works properly, and the ListItem is updated, but the values in the ListItem are completely overwritten ( I just want to change the value of one field ).
How do I define a custom Merge function for ListItem while still allowing Pagination to work in the result Pagination?
Below I give an example of how my structure is looking right now:
export const typePolicies: TypePolicies = {
ListItem: {
fields: {
tags: {
merge: (existing: Tag[] = [], incoming: Tag[]) => {
return !!incoming ? incoming : existing;
}
}
}
},
Query: {
fields: {
resultPagination: {
keyArgs: ["query", "sortByDate", "specificFields"],
merge: (existing, incoming, args) => {
if (!incoming) return existing;
if (args.args.offset === 0) return incoming;
const existingListItemLists: ListItem[][] =
existing?.articleSummaries ?? [];
const incomingListItemLists: ListItem[][] =
incoming?.articleSummaries ?? [];
return {
...incoming,
results: [...existingListItemLists, ...incomingListItemLists]
};
}
}
}
}
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
