I’m facing problem displaying with a react app the results from some queries.
I was using a simple merge policy to display an “infinite scroll” scenario in a page, by fetching a “review” type object with limit and startIndex. Everything was ok since i’ve redefined how I fetch a single review, not anymore by id but by Slug, I’ve read that in order to do so the only way was to use the WHERE clause in a query, but since i’ve changed this, the results are inconsistent, and the client access the cache badly, for istance not updating the correct object to display or overwriting previous results with copy of the same object.
here is the full scenario:
export const REVIEWS = gql`
query GetReviews($startIndex: Int = 0, $limit: Int = 2) {
reviews(start: $startIndex, limit: $limit, sort: "published_at:desc") {
Title,
Body,
Slug,
id,
}
}
`;
export const REVIEWBYSLUG = gql`
query GetReviewBySlug($Slug: String! ) {
reviews(where: {Slug: $Slug}) {
Title,
Body,
Slug,
id,
}
}
`
const client = new ApolloClient({
uri: process.env.REACT_APP_BACKEND_URL + '/graphql',
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
reviews: {
keyArgs: false,
merge(existing = [], incoming) { return [...existing, ...incoming]; },
}
}
}
}
})
});
Now when I refresh the page where the REVIEWBYSLUG is called, I obtain the correct result, but when I previously got the result from the REVIEWS query (for istance from the homepage) and then access the single review via link, the cache fetches the wrong one, and then overwrite with the same object all reviews in homepage