Apollo Client pagination hack
Maybe there is a better way to handle a situation where your graphql query is something like (and if there is please tell me!):
so we have this GenericResult type and it doesn't have an id or any other fields that we might use as the id AND we want to paginate the results of content and keep the pages together based on the key of the uniqId
. Doesn't seem like a super easy way to do this, but I have found a work around by adding the following to the typePolicies of the cache:
const myAwesomeCache = new InMemoryCache({
typePolicies: {
GenericResult: {
keyFields: [], // this forces it to be cacheable but with no apparent key
fields: {
content: {
// then we use keyArgs as a fake id, utilizing a passed in variable to the query to be our psuedo-id
keyArgs: (args, { variables }) => variables.uniqId,
merge: (existing = [], incoming) => [...existing, ...incoming],
}
}
}
}
})
And there you have it, a hacky workaround to work with a difficult graphql api. Now obviously this could be avoided by simply fixing the graphql api to include the id as a property. But sometimes you gotta fix some things the hard way.