feat: refetch query when subscribed mutation executes

[giacomorebonato]

Refetch a query when a dependant mutation executes

I read the following issues:

"Add ability to update the cache after a mutation #52"

Refetch queries with mutations subscription #74

They contain a proposal by @bmullan91 and jgoux that I liked, the n.3 about refetchAfterMutations.

Meaning that when using useQuery we can subscribe to a list of mutations that make the entire query refetch.
It also allows a filter property with a function that allows refetch only when it evaluates true.

Query below executes again when UPDATE_USER_MUTATION executes and contains userId === 1 in its variables.

useQuery(TEST_QUERY, {
  refetchAfterMutations: [
    {
      mutation: UPDATE_USER_MUTATION,
      filter: ({ userId }) => userId === 1
    }
  ]
})

The above is achieved by adding an EventEmitter (new events dependency) property to the GraphQLClient class.

While the issue also mentions the manual manipulation of the cache when a mutation happens to avoid roundtrips, I believe that this implementation stays relevant because it's easier to use and flexible.

It's my first contribution to the project and I am afraid that I am missing out something important: looking forward to hearing your thoughts :)

Related issues

• Add ability to update the cache after a mutation #52
• Refetch queries with mutations subscription #74

For reviewers

The first commit in this work contains the implementation which touches 8 files.
The next commits is me updating the project to Node 16, to fix Netlify build that relies already on it.
If this work wasn't needed I'll take them out.

Checklist

• I have checked the contributing document
• I have added or updated any relevant documentation
• I have added or updated any relevant tests

[giacomorebonato]

I believe deploy-preview step is failing because package-lock is still generated with Node 14 while the server is using Node 16 (I had the same issue locally).
I'll address that too in this PR.

Updates

I re-generated all lock files with Node 16, but I need someone's feedback about this, since the job is called "ci / build (14.x)", I am not sure if I am doing the right thing then.

Netlify deploy-preview step is using Node 16

[allforabit]

I've left a couple of comments. I want to try it out on a project but just wanted to ensure I'm using it correctly as the type signature seems to be wrong. I'm assuming it should be an array of mutation objects. I'm wondering if it needs to be an array of objects and could be optionally an array of strings with just the mutations?

[simoneb]

I didn't get a chance review thoroughly but upon a quick look this looks sensible and overall very good.

Considering the large change I would suggest to:

1. try it out on a project before publishing a new version to make sure everything keeps working. @allforabit can do that
2. publish a new version as a prerelease then test it out more thoroughly. I can do this
3. once we're happy, release a final version

[simoneb]

variables is going to be an object I guess?

[simoneb]

I would consider describing it in a different way:

• avoid mentioning "list of mutations", because in fact it could be only one
• the type definition should actually be string | object | (string | object)[]. Then, once you define the type you describe
  • if it's a string, it's the mutation string
  • if it's an object then it has properties mutation and filter
  • if it's an array, the elements can be of either type above

rephrase in a way that makes sense to the reader :)

[simoneb]

why don't we define the RefetchAfterMutationsData as a union type which represents all the possible options instead of doing it here?

[simoneb]

don't bump version numbers in PRs, they're bumped when we release

[simoneb]

the comment above would simplify this, too