Skip to content

Feature/query client on context #8599

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

Merged
merged 12 commits into from
Jan 31, 2025
Merged

Feature/query client on context #8599

merged 12 commits into from
Jan 31, 2025

Conversation

TkDodo
Copy link
Collaborator

@TkDodo TkDodo commented Jan 30, 2025

No description provided.

closing over a queryClient should now error, as we pass the queryClient directly to the queryFunctionContext
Copy link

nx-cloud bot commented Jan 30, 2025

View your CI Pipeline Execution ↗ for commit 840b47f.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 1m 25s View ↗

☁️ Nx Cloud last updated this comment at 2025-01-30 14:36:42 UTC

Copy link

pkg-pr-new bot commented Jan 30, 2025

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/angular-query-experimental

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 840b47f

Copy link

github-actions bot commented Jan 30, 2025

Sizes for commit 840b47f:

Branch Bundle Size
Main
This PR

@github-actions github-actions bot added documentation Improvements or additions to documentation package: angular-query-experimental labels Jan 30, 2025
Copy link

codecov bot commented Jan 30, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.24%. Comparing base (a507400) to head (840b47f).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #8599      +/-   ##
==========================================
- Coverage   46.29%   46.24%   -0.05%     
==========================================
  Files         199      199              
  Lines        7539     7532       -7     
  Branches     1724     1720       -4     
==========================================
- Hits         3490     3483       -7     
  Misses       3670     3670              
  Partials      379      379              
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 88.65% <ø> (ø)
@tanstack/eslint-plugin-query 88.03% <100.00%> (-0.20%) ⬇️
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods 0.00% <ø> (ø)
@tanstack/query-core 94.16% <100.00%> (+<0.01%) ⬆️
@tanstack/query-devtools 4.78% <ø> (ø)
@tanstack/query-persist-client-core 57.73% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/react-query 95.95% <ø> (ø)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 78.20% <ø> (ø)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 87.33% <ø> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 71.01% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)

@TkDodo TkDodo marked this pull request as ready for review January 30, 2025 12:03
@@ -354,24 +354,6 @@ ruleTester.run('exhaustive-deps', rule, {
}
`,
},
{
name: 'should ignore references of the queryClient',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

note: we don’t need an exception for closing over the queryClient anymore if we inject it into the queryFn. @Newbie012 would you agree?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I guess so. I never had to deal with more than one query client in a single app. Is it a valid use case to reference a foreign query client inside queryFn?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

nope, this is something the linter should definitely catch!

@@ -167,6 +169,7 @@ export class Query<
#initialState: QueryState<TData, TError>
#revertState?: QueryState<TData, TError>
#cache: QueryCache
#client: QueryClient
Copy link
Contributor

Choose a reason for hiding this comment

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

Would be nice to get a getter for QueryClient from the instance of Query.
I missed that before for experimental persister.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

you probably don’t need that now that it’s passed to the context, which the persister also has access to.

@TkDodo TkDodo merged commit f86eb7e into main Jan 31, 2025
8 checks passed
@TkDodo TkDodo deleted the feature/queryClient-on-context branch January 31, 2025 09:02
@frolic
Copy link

frolic commented Feb 5, 2025

perfect timing, just went looking for this 🙏

@jamesarosen
Copy link

I might argue that this is a breaking API change.

We use @hey-api/openapi-ts, which generates API client functions out of an OpenAPI schema. The generated function accept a client argument that is an API client, e.g. fetch.

Before this change, we could do this:

const { data, error } = useQuery({
  queryKey: ['documents'],
  queryFn: documentsControllerGetAll,
})

But now the client types are incompatible, forcing us to change this to

const { data, error } = useQuery({
  queryKey: ['documents'],
  queryFn: async () => {
    return documentsControllerGetAll();
  },
})

@TkDodo
Copy link
Collaborator Author

TkDodo commented Jun 19, 2025

@jamesarosen in that sense, adding any parameter to any function would be a breaking change?

@jamesarosen
Copy link

jamesarosen commented Jun 19, 2025

adding any parameter to any function would be a breaking change?

I don't think there's a single easy answer.

The orthodox rule is "removing or changing a feature is a breaking change; adding a feature is a non-breaking change."

There are two ways to look at this change:

  1. It introduced a new feature: the ability to work operate on the client. It's not a breaking change.
  2. It modified the behavior of an existing feature. It changed the contract of queryFn.

Postel's Law -- "Be conservative in what you send; be liberal in what you accept." -- might be relevant here. TanStack-Query is now sending (passing) something new. Then again, if the change in question were a new optional parameter to useQuery, TanStack-Query wouldn't be sending something new; it would be accepting something new. And that could break in exactly the same way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants