feat(query-core): add MutationFunctionContext argument to mutateFn
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.
we already have a PR for this:
- https://github.com/TanStack/query/pull/7343
can we consolidate the work in one PR?
I think we’d want 3 properties passed:
- mutationKey
- meta
- client
@TkDodo updated as requested
View your CI Pipeline Execution ↗ for commit 2c1a713843838739cce659e07da06d5748aee1cc.
| 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
More templates
- @tanstack/query-example-angular-auto-refetching
- @tanstack/query-example-angular-basic
- @tanstack/query-example-angular-basic-persister
- @tanstack/query-example-angular-devtools-panel
- @tanstack/query-example-angular-infinite-query-with-max-pages
- @tanstack/query-example-angular-optimistic-updates
- @tanstack/query-example-angular-pagination
- @tanstack/query-example-angular-query-options-from-a-service
- @tanstack/query-example-angular-router
- @tanstack/query-example-angular-rxjs
- @tanstack/query-example-angular-simple
- @tanstack/query-example-react-algolia
- @tanstack/query-example-react-auto-refetching
- @tanstack/query-example-react-basic
- @tanstack/query-example-react-basic-graphql-request
- @tanstack/query-example-chat
- @tanstack/query-example-react-default-query-function
- @tanstack/query-example-react-devtools-panel
- @tanstack/query-example-eslint-legacy
- @tanstack/query-example-react-infinite-query-with-max-pages
- @tanstack/query-example-react-load-more-infinite-scroll
- @tanstack/query-example-react-nextjs
- @tanstack/query-example-react-nextjs-app-prefetching
- @tanstack/query-example-nextjs-suspense-streaming
- @tanstack/query-example-react-offline
- @tanstack/query-example-react-optimistic-updates-cache
- @tanstack/query-example-react-optimistic-updates-ui
- @tanstack/query-example-react-pagination
- @tanstack/query-example-react-playground
- @tanstack/query-example-react-prefetching
- @tanstack/query-example-react-react-native
- @tanstack/query-example-react-router
- @tanstack/query-example-react-rick-morty
- @tanstack/query-example-react-shadow-dom
- @tanstack/query-example-react-simple
- @tanstack/query-example-react-star-wars
- @tanstack/query-example-react-suspense
- @tanstack/query-example-solid-astro
- @tanstack/query-example-solid-basic
- @tanstack/query-example-solid-basic-graphql-request
- @tanstack/query-example-solid-default-query-function
- @tanstack/query-example-solid-simple
- @tanstack/query-example-solid-start-streaming
- @tanstack/query-example-svelte-auto-refetching
- @tanstack/query-example-svelte-basic
- @tanstack/query-example-svelte-load-more-infinite-scroll
- @tanstack/query-example-svelte-optimistic-updates
- @tanstack/query-example-svelte-playground
- @tanstack/query-example-svelte-simple
- @tanstack/query-example-svelte-ssr
- @tanstack/query-example-svelte-star-wars
- @tanstack/query-example-vue-2.6-basic
- @tanstack/query-example-vue-2.7-basic
- @tanstack/query-example-vue-basic
- @tanstack/query-example-vue-dependent-queries
- @tanstack/query-example-vue-nuxt3
- @tanstack/query-example-vue-persister
- @tanstack/query-example-vue-simple
@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
We're quite interested in utilising this new feature at Sanity as part of our own abstraction for a SanityQueryClient – is there anything to do to help push this PR forward? Is it just the naming of context vs scope or more...?
@joshuaellis I’m fine with the scope renaming of what gets returned from onMutate. Then, we can have context for what gets passed to the mutationFn as second argument. I think it just needs to be done. If you want to open another PR to get it over the finish line, please do.
superseded by:
- https://github.com/TanStack/query/pull/9615