Skip to content
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

Add types for QueryFilters which flow down to Query<> and QueryKey/DataTag types #8332

Merged
merged 8 commits into from
Nov 27, 2024

Conversation

Nick-Lucas
Copy link
Contributor

@Nick-Lucas Nick-Lucas commented Nov 23, 2024

At tRPC we're working on a new react query client which only provides factories to React Query interfaces. Many of these factories already support full type-safety, for instance a QueryKey can have a DataTag which hints at the query data type.

QueryKey (with DataTag) and Query<> both support typesafety, but QueryFilters hides this and only exposes the defaults. This means our queryFilter factory method cannot be type-safe without replicating the tanstack query types into the tRPC codebase.

I propose upstreaming this type-safety so that everyone can benefit and tRPC can utilise it natively

Here is the work I'm doing on the tRPC side: trpc/trpc#6265

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.

looks lovely. Can you maybe add a type test please (in a .test-d.ts file) so that we are future proof and can see per example what this achieves? Thank you 🙏

Copy link

nx-cloud bot commented Nov 23, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 03ab3e3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@Nick-Lucas
Copy link
Contributor Author

test-d.ts

Done

Good I'm doing this. I think getQueryState could be next on my agenda, DataTag has no way to communicate an error type but getQueryState can get you back the error. I've left a test with a comment for now to document the current behaviour

@Nick-Lucas Nick-Lucas requested a review from TkDodo November 23, 2024 21:16
Copy link

pkg-pr-new bot commented Nov 26, 2024

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/eslint-plugin-query

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 03ab3e3

Copy link

codecov bot commented Nov 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.90%. Comparing base (dfe2cd1) to head (03ab3e3).
Report is 4 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #8332       +/-   ##
===========================================
+ Coverage   45.97%   62.90%   +16.93%     
===========================================
  Files         200      136       -64     
  Lines        7509     4799     -2710     
  Branches     1718     1345      -373     
===========================================
- Hits         3452     3019      -433     
+ Misses       3680     1540     -2140     
+ Partials      377      240      -137     
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 87.13% <ø> (ø)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core 94.52% <100.00%> (+0.82%) ⬆️
@tanstack/query-devtools 4.78% <ø> (ø)
@tanstack/query-persist-client-core 57.73% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/react-query 95.54% <ø> (ø)
@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.45% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)

@TkDodo TkDodo merged commit 422c879 into TanStack:main Nov 27, 2024
8 checks passed
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.

2 participants