refactor: handle 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 41a9096. 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/eslint-plugin-query

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

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@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-sync-storage-persister

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

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@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-devtools

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

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@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: 41a9096

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 82.28%. Comparing base (69476f0) to head (ed0e60f).

Additional details and impacted files

@@            Coverage Diff            @@
##           main    #8082       +/-   ##
=========================================
+ Coverage      0   82.28%   +82.28%     
=========================================
  Files         0       26       +26     
  Lines         0      350      +350     
  Branches      0       92       +92     
=========================================
+ Hits          0      288      +288     
- Misses        0       53       +53     
- Partials      0        9        +9

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.97% <ø> (∅)`
@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.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

refactor: handle 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

gwansikk commented Sep 22, 2024

codecov bot commented Sep 22, 2024 •

edited

Loading

TkDodo commented Oct 1, 2024

gwansikk commented Oct 3, 2024 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

gwansikk commented Sep 22, 2024 • edited Loading

Summary

Details

nx-cloud bot commented Sep 22, 2024 • edited Loading

☁️ Nx Cloud Report

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

gwansikk commented Sep 22, 2024

codecov bot commented Sep 22, 2024 • edited Loading

Codecov Report

TkDodo commented Oct 1, 2024

gwansikk commented Oct 3, 2024 • edited Loading

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

refactor: handle 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