You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm migrating from v4 to v5 and discovered that the suspense option still works at runtime in useQuery, even though it's been removed from the TypeScript types.
The Issue
According to the v5 migration guide, the experimental suspense: boolean flag has been removed, and we should use useSuspenseQuery instead.
However, I found that the suspense option can still be used at runtime if you bypass TypeScript:
Core level: query-core still supports the suspense option
// packages/query-core/src/types.ts
suspense?: boolean// 👈 Still exists
Questions
Is this intentional? Should the runtime validation be added to prevent this bypass?
Is it safe to use during migration? We have a large codebase with many queries, and gradually migrating to useSuspenseQuery would be easier if we could temporarily use this pattern.
Will this be removed in v6? Should we avoid relying on this behavior?
Workaround for Large Migrations
For teams migrating large codebases, this pattern could be useful as a temporary bridge:
// Centralized query options factoryfunctioncreateQueryOptions<T>(options: QueryOptions<T>){return{
...options,suspense: true,// Temporarily until we migrate to useSuspenseQuery}}// UsageuseQuery(createQueryOptions({queryKey: ['example'],queryFn: fetchData,}))
Environment
@tanstack/react-query: v5.x
TypeScript: 5.x
React: 18.x
Would appreciate any guidance on whether this is a known issue or if there are better migration strategies! 🙏
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Background
I'm migrating from v4 to v5 and discovered that the
suspense
option still works at runtime inuseQuery
, even though it's been removed from the TypeScript types.The Issue
According to the v5 migration guide, the experimental
suspense: boolean
flag has been removed, and we should useuseSuspenseQuery
instead.However, I found that the
suspense
option can still be used at runtime if you bypass TypeScript:❌ This fails at compile time (as expected):
✅ But this works at both compile time AND runtime:
Or using spread:
Why This Works
Looking at the source code:
Type level:
UseQueryOptions
omits'suspense'
from the base typeRuntime level:
useBaseQuery
still has all the suspense logic intactCore level:
query-core
still supports thesuspense
optionQuestions
useSuspenseQuery
would be easier if we could temporarily use this pattern.Workaround for Large Migrations
For teams migrating large codebases, this pattern could be useful as a temporary bridge:
Environment
@tanstack/react-query
: v5.xWould appreciate any guidance on whether this is a known issue or if there are better migration strategies! 🙏
Beta Was this translation helpful? Give feedback.
All reactions