Generate Apollo mutation refetchQueries operations configs factories

[brabeji]

While updating apollo cache by re-fetching queries is not the cleanest option, in combination with awaitRefetchQueries it's still arguably the easiest way to keep a consistent UI, until other optimizations are made.

We need to provide a full query config of the query we want to re-fetch.

// in some component
const widgetQueryConfig: { query: typeof WidgetQueryDocument; variables: WidgetQueryVariables } = {
	query: WidgetQueryDocument,
	variables: { widgetId: 'one' },
};

useSomeMutation({
	awaitRefetchQueries: true,
	refetchQueries: [widgetQueryConfig],
});

This can be simplified by generating respective operation config getters alongside operation hooks etc.:

// generated/operations.ts

// export function useWidgetQuery() ...

export function getWidgetQueryConfig(variables: WidgetQueryVariables) {
	return { query: WidgetQueryDocument, variables }
}

// in some component
useSomeMutation({
	awaitRefetchQueries: true,
	refetchQueries: [getWidgetQueryConfig({ widgetId: 'one' })],
});

Maybe there's a better solution? I've already done some work on this and tried to make it a separate plugin, but I had an issue avoiding duplicate declarations of gql documents. So right now I have it temporarily baked into typescript-react-apollo. Does this sound PR-worthy?

[crates]

Any word on this? Bueller?

[brabeji]

@crates I think the feature moved on as https://www.graphql-code-generator.com/docs/plugins/named-operations-object but I’m not sure how it supports variables right now

[dotansimha]

As @brabeji mentioned, it's possible to do it with named-operations-object plugin. Closing :)

[crates]

@dotansimha -
Does that plugin support variables yet? If not, this issue isn't resolved.

[crates]

@dotansimha -

In other words, if you're trying to fetch only the query for the edited record after a mutation, and NOT refetch EVERY instance of ALL queries associated with a named operation: ie. you want to refetch just the edited post, user, comment, etc. It's a major performance and bandwidth consideration that doesn't appear to be addressed in that plug-in yet. Moreover, this feature really ought to be brought into the base of the package and not require custom configuration or effort to achieve.

[MDSilber]

@dotansimha is there any update on this? What's the right way to pass refetch queries with variables through to a mutation?

[MDSilber]

Never mind, I figured it out. For anyone looking at this, it is already supported, albeit not being in the docs anywhere. For anyone else looking for the solution, you need to use the generated Document type for the query, rather than the named operation. Specifically, you're adding an Apollo QueryOptions object into the array, rather than a simple named operation string. For example, your refetch queries array might look something like this:

      refetchQueries: [
        namedOperations.Query.Comments,
        {
          query: UserDocument,
          variables: { id: userId },
        },
      ],

Note in the above example, there are two refetch queries: one using named operations (Comments query) and one that needed a param to be passed in, and that's done using the Document.

[Urigo]

@MDSilber would you be willing to send a PR to the docs to add it for others coming to this in the future?

[MDSilber]

Sure, I'll take care of it in the next few days.