Skip to content

feat(react-query): add mutationOptions #8960

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 2 commits into
base: main
Choose a base branch
from

Conversation

Ubinquitous
Copy link
Contributor

mutationOptions helps extracting mutation options into separate functions.

@github-actions github-actions bot added documentation Improvements or additions to documentation package: react-query labels Apr 6, 2025
@Ubinquitous Ubinquitous force-pushed the feature/react-query-mutation-options branch from 5e14207 to 596896d Compare April 6, 2025 10:23
Copy link

nx-cloud bot commented Apr 6, 2025

View your CI Pipeline Execution ↗ for commit ff15e5d.

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

☁️ Nx Cloud last updated this comment at 2025-04-07 08:18:32 UTC

Copy link

pkg-pr-new bot commented Apr 6, 2025

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: ff15e5d

Comment on lines 4 to 23
describe('mutationOptions', () => {
it('should not allow excess properties', () => {
return mutationOptions({
mutationFn: () => Promise.resolve(5),
mutationKey: ['key'],
// @ts-expect-error this is a good error, because onMutates does not exist!
onMutates: 1000,
})
})

it('should infer types for callbacks', () => {
return mutationOptions({
mutationFn: () => Promise.resolve(5),
mutationKey: ['key'],
onSuccess: (data) => {
expectTypeOf(data).toEqualTypeOf<number>()
},
})
})
})
Copy link
Contributor

@manudeli manudeli Apr 6, 2025

Choose a reason for hiding this comment

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

In my opinion, Adding type testing about DataTag would be better. When adding DataTag for queryOptions there is lots of pull requests to fix its typescript error. so if we can guarantee mutationOption's type before releasing this new feature, mutationOptions, it would be better

Copy link
Contributor Author

@Ubinquitous Ubinquitous Apr 7, 2025

Choose a reason for hiding this comment

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

Thank you, I just added a test case for DataTag, but I can't test it locally because of an error in @tanstack/query-core. Could you please tell me how to run test in local? Or maybe I wrote some part of the code wrong?

Here is the error message:
스크린샷 2025-04-07 오후 5 13 51

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Are there any updates?

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: react-query
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants