fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries #8665

gs18004 · 2025-02-18T05:00:16Z

Previously, the error was not shown when we used queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries.

const query1 = queryOptions({
  queryKey: ['key1'],
  queryFn: skipToken,
  initialData: 'initial data',
})

useSuspenseQueries({ queries: [query1] })

Now the error occurs.

… initialData and skipToken in queryFn inside useSuspenseQueries

nx-cloud · 2025-02-18T05:00:43Z

View your CI Pipeline Execution ↗ for commit 73ecec4.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	4m 46s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	33s	View ↗

☁️ Nx Cloud last updated this comment at 2025-02-18 09:35:39 UTC

pkg-pr-new · 2025-02-18T05:02:29Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 73ecec4

TkDodo · 2025-02-18T08:08:50Z

packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx

+  it('queryOptions with initialData and skipToken in queryFn should not work on useSuspenseQueries', () => {
+    const query1 = queryOptions({
+      queryKey: ['key1'],
+      queryFn: skipToken,


would be good to have a test that has a conditional skipToken:

queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5)

because that’s a lot closer to a real world use-case

codecov · 2025-02-18T09:35:57Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.05%. Comparing base (9a7bfd9) to head (73ecec4).
Report is 2 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #8665       +/-   ##
===========================================
+ Coverage   46.28%   84.05%   +37.76%     
===========================================
  Files         199       26      -173     
  Lines        7549      370     -7179     
  Branches     1729      108     -1621     
===========================================
- Hits         3494      311     -3183     
+ Misses       3675       50     -3625     
+ Partials      380        9      -371

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

lgenzelis · 2025-02-19T15:24:49Z

This PR introduced a TS change, and I'm not sure whether it was intended or not. Before this, you could do

const { data } = useQuery({ queryKey: ['query-key'], initialData: 42 })

and data would be inferred as number. Starting with this PR, it's now inferred as number | undefined. If it was unintended, and you folks think it's relevant, I can create an issue for it.

TkDodo · 2025-02-19T15:33:07Z

That's very relevant, and we should also have type-tests for this

gs18004 · 2025-02-19T15:48:35Z

This PR introduced a TS change, and I'm not sure whether it was intended or not. Before this, you could do
const { data } = useQuery({ queryKey: ['query-key'], initialData: 42 })
and data would be inferred as number. Starting with this PR, it's now inferred as number | undefined. If it was unintended, and you folks think it's relevant, I can create an issue for it.

I made an issue. Thank you for your report.

fix(react-query): make error to be shown when using queryOptions with…

529f66b

… initialData and skipToken in queryFn inside useSuspenseQueries

github-actions bot added the package: react-query label Feb 18, 2025

TkDodo reviewed Feb 18, 2025

View reviewed changes

test(react-query): update the test to have a conditional skipToken

73ecec4

gs18004 changed the title ~~fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries~~ fix(react-query): make error to be shown when using queryOptions with skipToken in queryFn inside useSuspenseQueries Feb 18, 2025

gs18004 changed the title ~~fix(react-query): make error to be shown when using queryOptions with skipToken in queryFn inside useSuspenseQueries~~ fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries Feb 18, 2025

TkDodo approved these changes Feb 18, 2025

View reviewed changes

TkDodo merged commit 56183f0 into TanStack:main Feb 18, 2025
6 of 7 checks passed

lgenzelis mentioned this pull request Feb 19, 2025

useQuery infers data as | undefined when using initialData without queryFn #8672

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries #8665

fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries #8665

gs18004 commented Feb 18, 2025

nx-cloud bot commented Feb 18, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 18, 2025 •

edited

Loading

TkDodo Feb 18, 2025

codecov bot commented Feb 18, 2025 •

edited

Loading

lgenzelis commented Feb 19, 2025

TkDodo commented Feb 19, 2025

gs18004 commented Feb 19, 2025 •

edited

Loading

fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries #8665

fix(react-query): make error to be shown when using queryOptions with initialData and skipToken in queryFn inside useSuspenseQueries #8665

Conversation

gs18004 commented Feb 18, 2025

nx-cloud bot commented Feb 18, 2025 • edited Loading

pkg-pr-new bot commented Feb 18, 2025 • edited Loading

TkDodo Feb 18, 2025

Choose a reason for hiding this comment

codecov bot commented Feb 18, 2025 • edited Loading

Codecov Report

lgenzelis commented Feb 19, 2025

TkDodo commented Feb 19, 2025

gs18004 commented Feb 19, 2025 • edited Loading

nx-cloud bot commented Feb 18, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 18, 2025 •

edited

Loading

codecov bot commented Feb 18, 2025 •

edited

Loading

gs18004 commented Feb 19, 2025 •

edited

Loading