Skip to content

feat(query-core): add MutationFunctionContext argument to mutateFn #9193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

travikk
Copy link

@travikk travikk commented May 27, 2025

This PR adds new argument to mutateFn allowing for access to queryClient as well as meta object.

This feature should make it easier to attach authentication headers from within mutateFn, that would typically live in QueryCache. Currently that's made very difficult and requires either having singleton context in the codebase or requiring consumers of mutations to pass auth token each time.

This PR also makes it more similar to how queryFn behaves, in that it accepts QueryFunctionContext.

Note: I wasn't entirely sure about the name of MutateFunctionContext, but ultimately I decided to go ahead with that name to mirror the way queryFn behaves. I realise this might be suboptimal, due to there already existing a TContext for mutations. Happy to discuss and take direction here.

add new argument to mutateFn enabling access to queryClient as well as meta object
@github-actions github-actions bot added documentation Improvements or additions to documentation package: query-core labels May 27, 2025
@TkDodo
Copy link
Collaborator

TkDodo commented Jun 2, 2025

we already have a PR for this:

can we consolidate the work in one PR?

I think we’d want 3 properties passed:

- mutationKey
- meta
- client

This PR adds new mutationKey property to MutationFunctionContext that's passed to mutateFn.
@travikk
Copy link
Author

travikk commented Jun 3, 2025

@TkDodo updated as requested

Copy link

nx-cloud bot commented Jun 19, 2025

View your CI Pipeline Execution ↗ for commit 2c1a713.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ❌ Failed 2m 21s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 22s View ↗

☁️ Nx Cloud last updated this comment at 2025-06-19 08:32:16 UTC

Copy link

pkg-pr-new bot commented Jun 19, 2025

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9193

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9193

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9193

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9193

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9193

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9193

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9193

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9193

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9193

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9193

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9193

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9193

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9193

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9193

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9193

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9193

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9193

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9193

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9193

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9193

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9193

commit: 2c1a713

- **Required, but only if no default mutation function has been defined**
- A function that performs an asynchronous task and returns a promise.
- `variables` is an object that `mutate` will pass to your `mutationFn`
- `context` is an object that `mutate` will pass to your `mutationFn`. Contains reference to `QueryClient`, `mutationKey` and optional `meta` object.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there’s one more thing that’s a bit troubling, and that’s the fact that we already refer to something as “context” for mutations: The value that gets returned from onMutate, which can be seen in this example here:

https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo

and in code here:

context: TContext | undefined

since it’s part of the public MutationState, which is available via useMutationState, we can’t just rename this, so it’s a bit unfortunate.

Any ideas ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation package: query-core
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants