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 6 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 f3b74c0.

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

☁️ Nx Cloud last updated this comment at 2025-05-01 16:33:27 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-devtools

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

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@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: f3b74c0

Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

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

sorry but it seems like you’ve copy-pasted queryOptions and replaced the word query with the word mutation :/

your starting point should’ve been useMutation, not queryOptions

TData,
TMutationKey
>['mutationFn'],
SkipToken | undefined
Copy link
Collaborator

Choose a reason for hiding this comment

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

skipToken is specific to queries. This isn’t needed.

UseMutationOptions<TMutationFnData, TError, TData, TMutationKey>,
'mutationFn'
> & {
initialData:
Copy link
Collaborator

Choose a reason for hiding this comment

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

there is no initialData for mutations

TMutationKey
>,
): DefinedInitialDataOptions<TMutationFnData, TError, TData, TMutationKey> & {
mutationKey: DataTag<TMutationKey, TMutationFnData, TError>
Copy link
Collaborator

Choose a reason for hiding this comment

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

we also don’t need a DataTag, this is query specific.

Copy link

codecov bot commented May 1, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.30%. Comparing base (fd34b98) to head (f3b74c0).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #8960       +/-   ##
===========================================
+ Coverage   44.60%   84.30%   +39.70%     
===========================================
  Files         203       27      -176     
  Lines        8107      376     -7731     
  Branches     1815      110     -1705     
===========================================
- Hits         3616      317     -3299     
+ Misses       4059       50     -4009     
+ Partials      432        9      -423     
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental ∅ <ø> (∅)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister ∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core ∅ <ø> (∅)
@tanstack/query-devtools ∅ <ø> (∅)
@tanstack/query-persist-client-core ∅ <ø> (∅)
@tanstack/query-sync-storage-persister ∅ <ø> (∅)
@tanstack/react-query 95.45% <100.00%> (+0.02%) ⬆️
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query ∅ <ø> (∅)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client ∅ <ø> (∅)
@tanstack/svelte-query ∅ <ø> (∅)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client ∅ <ø> (∅)
@tanstack/vue-query ∅ <ø> (∅)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
@Ubinquitous
Copy link
Contributor Author

Thank you for reviewing my PR. I thought queryOptions and mutationOptions could be structured similarly since it was an options-related function. I re-created useMutation as start. I changed it to only have UseMutationOptions, excluding unnecessary data tags and initialData.

options: UseMutationOptions<TData, TError, TVariables, TContext>,
): UseMutationOptions<TData, TError, TVariables, TContext>

export function mutationOptions(options: unknown) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

if there’s only declaration, we don’t need overloads

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you, I changed it to a non-overloaded function.

@manudeli
Copy link
Collaborator

manudeli commented May 1, 2025

I merged #9094 to resolve below ci failure because of flaky timer tests

image
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
3 participants