Mutate data outside from react component/hook

[NWPoul]

How we can mutate data outside of react component?
Searching offer not working solution to use 'mutate' method of application's instance of QueryClient...
which looks pretty logical but instance of QueryClient does not contain such a method

[TkDodo]

you mean fire off a mutation ? There isn't much gain in doing that outside of react. You can't take advantage of the lifecycle management, so you can just as easily fire off a request with just fetch / axios.

But it's definitely possible:

query/packages/query-core/src/tests/utils.ts

Lines 35 to 44 in 5d29f8f

	export const executeMutation = <TVariables>(
	queryClient: QueryClient,
	options: MutationOptions<any, any, TVariables, any>,
	variables: TVariables,
	) => {
	return queryClient
	.getMutationCache()
	.build(queryClient, options)
	.execute(variables)
	}

[adi-doorloop]

@TkDodo How do you do it for V4? mutation.execute() doesn't receive variables, or maybe just a type error?

[denisborovikov]

iirc, build accepts variables in the 3rd argument .build(queryClient, options, { variables })

[RBilly]

Hi, I've got quite the edge case where I also need to fire a mutation outside of react.
So I've a websocket handler outside of react and when some type of message is received, I want to fire an existing mutation.
So I have tried this in the function called by the WS handler:

export const updateProcess = async () => {
  queryClient.getMutationCache().find({ mutationKey })?.execute();
};

and

export const updateProcess = async () => {
  const mutation = queryClient.getMutationCache().find({ mutationKey });
  if (mutation ) {
    queryClient.getMutationCache().build(
         queryClient, mutation.options, mutation.state.variables
    ).execute();
  }
};

but none of them works. In both cases the onMutate function throw an error saying that the expected params is undefined.
but when I display mutation.state.variables, it is correctly defined.

Is there any way to do this or is it a stupid idea ?

Btw I'm using react-query v4

[RBilly]

Since it was really bothering me, I went looking into the code and found the answer as to why it does not work.
When displaying the content of the mutation retrieved from the cache, the state contains the expected variables.
But, in the execute function from the mutation class file there this line of code (l. 202):
this.dispatch({ type: 'loading', variables: this.options.variables! })
As you can see, it takes variables from the mutation options and that's where things go wrong.
Because the dispatch will set the mutation state variables with options variables passed as action.variables parameter:

case 'loading':
          return {
            ...state,
            context: action.context,
            data: undefined,
            failureCount: 0,
            failureReason: null,
            error: null,
            isPaused: !canFetch(this.options.networkMode),
            status: 'loading',
            variables: action.variables, // <--- here
          }

But after the mutation is fired, the "variables" field of options does not exists anymore.
And when onMutate is called with mutation state variables after the loading dispatch, it's actually undefined now...
So it's impossible to fire it again just by calling execute. First we need to set the options.variables using the state.variables.

export const updateProcess = async () => {
  const mutation = queryClient.getMutationCache().find({ mutationKey });
  if (mutation ) {
    mutation.setOptions({...mutation.options, variables: {...mutation.state.variables}})
    await mutation.execute();
  }
};

Now I'm able to work around the issue, but my question is why the options.variables is removed. Is it meant to be like this for a reason ?

[romellem]

I want to rebump this for query@v5. I too have the need to imperatively add data to the mutationCache (we have to react to a redux event in a saga (I know, I know)). For QueryCache, this is handled by queryClient.fetchQuery + queryOptions(). However I'm not sure how to do the same for mutations.

I was a bit surprised to see the docs for MutationCache not include the build + execute, or find methods.

Should I take these methods being undocumented to mean these are meant to be private? How "dangerous" is it to try and call these manually?

query/packages/query-core/src/mutationCache.ts

Line 105 in f6ae1cc

build<TData, TError, TVariables, TOnMutateResult>(

query/packages/query-core/src/mutation.ts

Line 176 in f6ae1cc

async execute(variables: TVariables): Promise<TData> {