refactor: throw type error when `skipToken` is present in suspense query #8082

gwansikk · 2024-09-22T13:37:19Z

Summary

I improve DX(developer experience) by displaying an error during TypeScript type checking to indicate that skipToken cannot be used in Suspense Query.

Details

I re-declared queryFn in the options for Suspense Query.
Added overloaded types for Suspense Query to queryOptions and infiniteQueryOptions.

I removed the skipToken type from Suspense Query and modified the types as follows to display an error when skipToken is assigned.

// UseSuspenseQueryOptions (types.ts)
export interface UseSuspenseQueryOptions<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> extends OmitKeyof<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    'queryFn' | 'enabled' | 'throwOnError' | 'placeholderData'
  > {
  queryFn: Exclude<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],
    SkipToken
  >
}

While it was a good attempt, I couldn't pass the options using queryOptions (because of the differing types), so I had no choice but to add a new overload for Suspense Query in queryOptions.

// New overload type for suspense query (queryOptions.ts)
export type UnusedSkipTokenOptions<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> = OmitKeyof<
  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  'queryFn'
> & {
  queryFn: Exclude<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],
    SkipToken
  >
}

nx-cloud · 2024-09-22T13:38:03Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f9aa558. 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 2 targets

Sent with 💌 from NxCloud.

pkg-pr-new · 2024-09-22T13:39:14Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8082

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8082

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8082

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8082

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8082

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@8082

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@8082

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8082

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8082

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@8082

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8082

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8082

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8082

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@8082

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8082

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8082

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@8082

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8082

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8082

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@8082

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8082

commit: f9aa558

gwansikk · 2024-09-22T13:41:00Z

@TkDodo To implement this, I had no choice but to add a new overload type to queryOptions (modifying queryOptions feels risky). Is there a better way to handle this?

codecov · 2024-09-22T13:41:53Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.89%. Comparing base (2fe16e5) to head (f9aa558).
Report is 26 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #8082       +/-   ##
===========================================
+ Coverage   45.41%   81.89%   +36.48%     
===========================================
  Files         200       26      -174     
  Lines        7456      359     -7097     
  Branches     1696       98     -1598     
===========================================
- Hits         3386      294     -3092     
+ Misses       3694       56     -3638     
+ Partials      376        9      -367

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	`93.12% <100.00%> (ø)`
@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	`∅ <ø> (∅)`

TkDodo · 2024-10-01T18:26:29Z

Is there a better way to handle this?

don’t think so

gwansikk · 2024-10-03T04:41:10Z

I believe this PR is ready for review, and I would appreciate your feedback.

I think this improvement has a significant impact on developer experience.
Instead of displaying messages via console logs, it now shows errors through type checks.
For third-party packages using the React Query package, type safety is ensured.
This allows third-party packages to be aware of the use of SkipToken in Suspense Hooks in advance, providing clearer type guarantees for development.

saul-atomrigs · 2024-10-05T02:35:27Z

This is great, although I think we may keep the console.errors for those projects not using Typescript 😭
How about keeping the console.errors and adding the type checking altogether?

TkDodo · 2024-10-09T13:55:28Z

sorry about the conflicts - can you fix them please?

packages/react-query/src/useSuspenseQuery.ts

…ense hooks

TkDodo · 2024-10-11T05:57:18Z

one more question: what happens if you pass options created queryOptions to useSuspenseQuery now?

const options = queryOptions({ queryKey: ['test'], queryFn: skipToken })

const query = useSuspenseQuery(options)

?

gwansikk · 2024-10-11T06:11:22Z

one more question: what happens if you pass options created queryOptions to useSuspenseQuery now?

if skipToken exists in queryFn, a type error will occur.

TkDodo · 2024-10-11T09:33:11Z

perfect - can you add a test for that too please? Then I'll ship it 🚢

gwansikk · 2024-10-11T12:27:47Z

perfect - can you add a test for that too please? Then I'll ship it 🚢

I have added test cases for queryOptions, infiniteQueryOptions!

There are no test errors in the local environment, but errors occasionally occur during the GitHub CI process. I’m unsure what to do to fix this error. Could you please help me? @TkDodo

Task logs: https://cloud.nx.app/logs/bCPDeKeWGE

TkDodo · 2024-10-11T18:21:23Z

I’ve tried to stabilize the test in a different PR. It’s just flaky right now.

gwansikk added 3 commits September 22, 2024 03:24

refactor: handle type error when skipToken is present in suspense query

f25720b

test(react-query): add skipToken test for query hooks

ca9bf3d

Merge branch 'main' into react-query/exclude-suspense-skiptoken

b91921e

github-actions bot added the package: react-query label Sep 22, 2024

Merge branch 'main' into react-query/exclude-suspense-skiptoken

ed0e60f

gwansikk marked this pull request as ready for review October 3, 2024 04:41

Merge branch 'main' into react-query/exclude-suspense-skiptoken

41a9096

Merge branch 'main' into react-query/exclude-suspense-skiptoken

2d86422

gwansikk changed the title ~~refactor: handle type error when skipToken is present in suspense query~~ refactor: throw type error when skipToken is present in suspense query Oct 6, 2024

gwansikk added 2 commits October 8, 2024 19:29

Merge branch 'main' into react-query/exclude-suspense-skiptoken

dfa9d1a

Merge branch 'main' into react-query/exclude-suspense-skiptoken

73254d6

gwansikk and others added 7 commits October 9, 2024 23:05

Merge branch 'main' into react-query/exclude-suspense-skiptoken

5b02842

Merge branch 'main' into react-query/exclude-suspense-skiptoken

cc2e4f9

Merge branch 'main' into react-query/exclude-suspense-skiptoken

8a93abf

fix: merge form main

91c8ffd

ci: apply automated fixes

80fb698

Merge branch 'main' into react-query/exclude-suspense-skiptoken

0cc01cd

Merge branch 'main' into react-query/exclude-suspense-skiptoken

47653b1

TkDodo reviewed Oct 10, 2024

View reviewed changes

packages/react-query/src/useSuspenseQuery.ts Show resolved Hide resolved

gwansikk added 3 commits October 10, 2024 18:42

feat(react-query): display “skipToken is not allowed” message in susp…

9372c8b

…ense hooks

feat(react-query): display “skipToken is not allowed” message in susp…

2563143

…ense hooks

feat(react-query): display “skipToken is not allowed” message in susp…

aa7d780

…ense hooks

Merge branch 'main' into react-query/exclude-suspense-skiptoken

b5bd8a9

TkDodo approved these changes Oct 11, 2024

View reviewed changes

Merge branch 'main' into react-query/exclude-suspense-skiptoken

907d39f

test(react-query): add test case

b7cd4b1

TkDodo added 2 commits October 11, 2024 20:22

Merge branch 'main' into react-query/exclude-suspense-skiptoken

7f61e8f

Merge branch 'main' into react-query/exclude-suspense-skiptoken

f9aa558

TkDodo merged commit a991d92 into TanStack:main Oct 11, 2024
5 checks passed

gwansikk deleted the react-query/exclude-suspense-skiptoken branch October 11, 2024 18:30

This was referenced Oct 13, 2024

chore: bump @tanstack/react-query dependency trpc/trpc#6118

Merged

fix: make queryFn optional again #8176

Merged

TkDodo mentioned this pull request Oct 15, 2024

infiniteQueryOptions can't be used with both useInfiniteQuery and useSuspenseInfiniteQuery #8184

Closed

This was referenced Nov 2, 2024

[Snyk] Upgrade @tanstack/react-query from 5.59.0 to 5.59.11 mong/mongts#3387

Closed

[Snyk] Upgrade @tanstack/react-query-devtools from 5.59.0 to 5.59.11 mong/mongts#3388

Closed

jwinr mentioned this pull request Nov 4, 2024

[Snyk] Upgrade @tanstack/react-query from 5.59.0 to 5.59.13 jwinr/threadly#31

Merged

CalPinSW mentioned this pull request Nov 5, 2024

[Snyk] Upgrade @tanstack/react-query from 5.53.1 to 5.59.13 CalPinSW/playlist-manager#55

Merged

GouravNG mentioned this pull request Nov 5, 2024

[Snyk] Upgrade @tanstack/react-query from 5.56.2 to 5.59.13 GouravNG/recipeland#22

Open

This was referenced Nov 7, 2024

[Snyk] Upgrade @tanstack/react-query-persist-client from 5.56.1 to 5.59.15 zntb/crypto-ticker#69

Closed

[Snyk] Upgrade @tanstack/react-query from 5.59.8 to 5.59.15 zntb/crypto-ticker#71

Merged

muhiddinjv mentioned this pull request Nov 7, 2024

[Snyk] Upgrade @tanstack/react-query from 5.45.1 to 5.59.15 muhiddinjv/ollio-app#117

Closed

juliusmarminge mentioned this pull request Nov 7, 2024

bug: useSuspenseInfiniteQuery's select method expects wrong return type trpc/trpc#6195

Open

1 task

doperiddle mentioned this pull request Nov 8, 2024

[Snyk] Upgrade @tanstack/react-query from 5.18.1 to 5.59.15 doperiddle/web-examples#10

Merged

snyk-io bot mentioned this pull request Nov 9, 2024

[Snyk] Upgrade @tanstack/react-query from 4.19.1 to 5.59.15 doperiddle/chainlist#6

Open

muhammadahsanmirza mentioned this pull request Nov 10, 2024

[Snyk] Upgrade @tanstack/react-query from 5.54.1 to 5.59.15 muhammadahsanmirza/internship-portal-client-view#7

Open

JulianFl mentioned this pull request Nov 10, 2024

[Snyk] Upgrade @tanstack/react-query from 5.32.1 to 5.59.15 JulianFl/PicturaObscura#21

Open

DogPawHat mentioned this pull request Nov 10, 2024

UseQueryOptions type declaration regression, does not work for useSuspenseQuery #8258

Closed

Uh oh!

refactor: throw type error when skipToken is present in suspense query #8082

refactor: throw type error when skipToken is present in suspense query #8082

Uh oh!

Conversation

gwansikk commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Uh oh!

nx-cloud bot commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☁️ Nx Cloud Report

Uh oh!

pkg-pr-new bot commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gwansikk commented Sep 22, 2024

Uh oh!

codecov bot commented Sep 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

TkDodo commented Oct 1, 2024

Uh oh!

gwansikk commented Oct 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

saul-atomrigs commented Oct 5, 2024

Uh oh!

TkDodo commented Oct 9, 2024

Uh oh!

Uh oh!

TkDodo commented Oct 11, 2024

Uh oh!

gwansikk commented Oct 11, 2024

Uh oh!

TkDodo commented Oct 11, 2024

Uh oh!

gwansikk commented Oct 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TkDodo commented Oct 11, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor: throw type error when `skipToken` is present in suspense query #8082

refactor: throw type error when `skipToken` is present in suspense query #8082

gwansikk commented Sep 22, 2024 •

edited

Loading

nx-cloud bot commented Sep 22, 2024 •

edited

Loading

pkg-pr-new bot commented Sep 22, 2024 •

edited

Loading

codecov bot commented Sep 22, 2024 •

edited

Loading

gwansikk commented Oct 3, 2024 •

edited

Loading

gwansikk commented Oct 11, 2024 •

edited

Loading