1

I'm using Postgraphile to generate a Graphql schema for me. I am using Apollo Client 3 to help with querying/caching. Here is the relevant shape of my schema:

Query -> buckets: BucketsConnection -> edges: BucketsEdge -> node: Bucket

Query -> nuggets: NuggetsConnection -> edges: NuggetsEdge -> node: Nugget

nuggets and buckets have a many:many relationship.

When I try to create a new record for either nugget for bucket, I get this warning:

Cache data may be lost when replacing the nuggets field of a Query object.

To address this problem (which is not a bug in Apollo Client), define a custom merge function for the Query.nuggets field, so InMemoryCache can safely merge these objects:

existing: [{"**typename":"NuggetsEdge","node":{"**ref":"Nugget:0343d751-40de-4036-825e-837cb15674c4"}},......... incoming: {"**typename":"NuggetsConnection","edges":[{"**typename":"NuggetsEdge","node":{"__ref":"Nugget:0343d751-40de-4036-825e-837cb15674c4"}},.........

I notice that the shape of these 2 are different, and it makes sense that they should match one another, so I did this in my InMemoryCache schema:

        typePolicies: {
            Query: {
                fields: {
                    nuggets: {
                        merge: (existing = [], incoming) => {
                            return [
                                ...existing, 
                                ...incoming.edges,
                            ]
                        },
                    },
                    buckets: {
                        merge: (existing = [], incoming) => {
                            return [
                                ...existing,
                                ...incoming.edges,
                            ]
                        },
                    },
                },
            },
        },

However, this does not solve the issue, and it results in data = undefined being returned from the apollo query.

Here is my update function on the 'createNugget' mutation:

        update(cache, { data: { createNugget } }) {
            cache.modify({
                fields: {
                    nuggets(existingNuggets = []) {
                        const newNuggetRef = cache.writeFragment({
                            data: createNugget.nugget,
                            fragment: gql`
                                fragment NewNugget on Nugget {
                                    id
                                    title
                                    mediaItems
                                }
                            `,
                        })
                        return [
                            ...existingNuggets,
                            newNuggetRef,
                        ]
                    },
                },
            })
        },

So I am curious to know why the cache doesn't seem to like the format I am passing it, because the incoming seems to match the existing.

Tycholiz
  • 1,102
  • 4
  • 17
  • 33

0 Answers0