How to concat a new result only to query with matching params?

Help
,
1

Basically I have a query “posts” that gets differentiated in the cache by using:
posts: concatPagination([“team”])

The problem I have, is that I don’t know how to concat a new result to that specific query with the matching “team” argument after a mutation.

unknown

2

See here for docs on how to update cache after doing a mutation: Mutations in Apollo Client - Apollo GraphQL Docs
And here for more details on updating the cache: Reading and writing data to the cache - Apollo GraphQL Docs

I would suggest starting with trying out readQuery / writeQuery / updateQuery

1 Like
3

Alright, I tried all 3 and updateQuery seems to do what I want more easily.

But now knowing how to use these I stumbled upon another problem which is caused by me relying on Apollo’s concatPagination function which I use for pagination on the “posts” query.

It concats any new results from my useQuery to the posts array.
The issue is that it does the same thing when using updateQuery.

Here’s my mutation:

await createPost({
        variables: { post: { title, content, team} },

        update: (cache, { data: { createPost } }) => {
          cache.updateQuery({ 
            query: ALL_POSTS_QUERY,
            variables: {
              team: team
            }
          }, ({posts}) => ({ // update function
            posts: [createPost, ...posts]
          }));
        },
      });

typePolicy:

      typePolicies: {
        Query: {
          fields: {
            posts: concatPagination(["team"]),
          }
        }
      },

I believe the concatPagination function forces every new Post to be concatenated to the bottom of the posts array.

Is there any way I can escape this behavior when doing a mutation?
If not, is there some way I can see the source code of concatPagination that is not in TypeScipt?

expected result:

before mutation - posts: [post3, post2, post1]
after mutation - posts: [post4, post3, post2, post1]

actual result:

before mutation - posts: [post3, post2, post1]
after mutation - posts: [post3, post2, post1, post4, post3, post2, post1]
4

@Don_Toliver If you use cache.modify() instead of cache.updateQuery() then it will skip your merge function

1 Like
5

Or you could change your usage of cache.updateQuery to work around the behavior of the merge function by only supplying the new post (instead of all posts). This would probably add the new post to the end of the array instead of the beginning though.

1 Like
6

With cache.modify() I’m unable(don’t know) how to target the query with the matching variables
I also already tried your second suggestion but it gets added to the bottom of the array as you predicted.

7

Oh sorry about that. I thought cache.modify() had better support for field args but I guess I misremembered. I found this github issue which sounds similar to what you’re doing: Have `cache.modify` functions receive `options.args` · Issue #7129 · apollographql/apollo-client · GitHub

Looks like there’s a workaround described here: [Discussion] fetchMore is a bad match with cache redirects (type policies) · Issue #6394 · apollographql/apollo-client · GitHub

Sorry I couldn’t find anything better!

1 Like
8

Another option might be to write your own version of concatPagination to somehow put new posts at the beginning of the array, although I’m not sure exactly how that would work

1 Like
9

Thank you very much for trying to find a solution to my issue.
I will try the workaround but I think a long term solution would require me to figure out how to replicate concatPagination somehow.

Every option seems hacky at the moment tho.

1 Like