fix(query-core) Fix queries argument's type definition in queriesObserver
queries argument is not typed consistently in many of the methods in queriesObserver class. The constructor typed it to be Array<QueryObserverOptions<any, any, any, any, any>> but in few other places it's Array<QueryObserverOptions> which means the default will kick in, making it Array<QueryObserverOptions<unknown, DefaultError, unknown, unknown, QueryKey>.
This caused issues when I try to interact with queryObserver:
const queryOptions: Array<QueryObserverOptions<Data, Error, SelectedData, Data, QueryKey>> = { } // some query options
// defaultedOptions typed as DefaultedQueryObserverOptions<unknown, Error, unknown, unknown, QueryKey>[]
const defaultedOptions = queryOptions.map(queryOption => {
const defaultedOption = queryClient.defaultQueryOptions(queryOption)
defaultedOption._optimisticResults = isRestoring
? 'isRestoring'
: 'optimistic'
return defaultedOption
})
// OK
const queriesObserver = new QueriesObserver<Array<QueryObserverResult<SelectedData, Error>>>(
queryClient,
defaultedOptions
)
// ERROR
// Argument of type 'DefaultedQueryObserverOptions<Data, Error, SelectedData, Data, QueryKey>[]' is not assignable to parameter of type 'QueryObserverOptions<unknown, Error, unknown, unknown, QueryKey, never>[]'.
// Type 'DefaultedQueryObserverOptions<Data, Error, SelectedData, Data, QueryKey>' is not assignable to type 'QueryObserverOptions<unknown, Error, unknown, unknown, QueryKey, never>'.
// Types of property 'enabled' are incompatible.
// Type 'Enabled<Data, Error, Data, QueryKey> | undefined' is not assignable to type 'Enabled<unknown, Error, unknown, QueryKey> | undefined'.
// Type '(query: Query<Data, Error, Data, QueryKey>) => boolean' is not assignable to type 'Enabled<unknown, Error, unknown, QueryKey> | undefined'.
// Type '(query: Query<Data, Error, Data, QueryKey>) => boolean' is not assignable to type '(query: Query<unknown, Error, unknown, QueryKey>) => boolean'.
// Types of parameters 'query' and 'query' are incompatible.
// Type 'Query<unknown, Error, unknown, QueryKey>' is not assignable to type 'Query<Data, Error, Data, QueryKey>'.
// The types of 'options.queryFn' are incompatible between these types.
// Type 'unique symbol | QueryFunction<unknown, QueryKey, never> | undefined' is not assignable to type 'unique symbol | QueryFunction<Data, QueryKey, never> | undefined'.
// Type 'QueryFunction<unknown, QueryKey, never>' is not assignable to type 'unique symbol | QueryFunction<Data, QueryKey, never> | undefined'.
// Type 'QueryFunction<unknown, QueryKey, never>' is not assignable to type 'QueryFunction<Data, QueryKey, never>'.
// Type 'unknown' is not assignable to type 'Data'.
// 'Data' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.ts(2345)
queriesObserver.setQueries(defaultedOptions)
In the fix, I used the same type that the constructor takes in for queryOptions in setQueries and a few other places.
View your CI Pipeline Execution ↗ for commit 3ee21cff82b676ebd6375a468ace69b2ee97179d
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:sherif,test:knip,tes... |
✅ Succeeded | 2m 50s | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 1m 21s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-07-30 09:58:21 UTC
More templates
- @tanstack/query-example-angular-auto-refetching
- @tanstack/query-example-angular-basic
- @tanstack/query-example-angular-basic-persister
- @tanstack/query-example-angular-devtools-panel
- @tanstack/query-example-angular-infinite-query-with-max-pages
- @tanstack/query-example-angular-optimistic-updates
- @tanstack/query-example-angular-pagination
- @tanstack/query-example-angular-query-options-from-a-service
- @tanstack/query-example-angular-router
- @tanstack/query-example-angular-rxjs
- @tanstack/query-example-angular-simple
- @tanstack/query-example-react-algolia
- @tanstack/query-example-react-auto-refetching
- @tanstack/query-example-react-basic
- @tanstack/query-example-react-basic-graphql-request
- @tanstack/query-example-chat
- @tanstack/query-example-react-default-query-function
- @tanstack/query-example-react-devtools-panel
- @tanstack/query-example-eslint-legacy
- @tanstack/query-example-react-infinite-query-with-max-pages
- @tanstack/query-example-react-load-more-infinite-scroll
- @tanstack/query-example-react-nextjs
- @tanstack/query-example-react-nextjs-app-prefetching
- @tanstack/query-example-nextjs-suspense-streaming
- @tanstack/query-example-react-offline
- @tanstack/query-example-react-optimistic-updates-cache
- @tanstack/query-example-react-optimistic-updates-ui
- @tanstack/query-example-react-pagination
- @tanstack/query-example-react-playground
- @tanstack/query-example-react-prefetching
- @tanstack/query-example-react-react-native
- @tanstack/query-example-react-router
- @tanstack/query-example-react-rick-morty
- @tanstack/query-example-react-shadow-dom
- @tanstack/query-example-react-simple
- @tanstack/query-example-react-star-wars
- @tanstack/query-example-react-suspense
- @tanstack/query-example-solid-astro
- @tanstack/query-example-solid-basic
- @tanstack/query-example-solid-basic-graphql-request
- @tanstack/query-example-solid-default-query-function
- @tanstack/query-example-solid-simple
- @tanstack/query-example-solid-start-streaming
- @tanstack/query-example-svelte-auto-refetching
- @tanstack/query-example-svelte-basic
- @tanstack/query-example-svelte-load-more-infinite-scroll
- @tanstack/query-example-svelte-optimistic-updates
- @tanstack/query-example-svelte-playground
- @tanstack/query-example-svelte-simple
- @tanstack/query-example-svelte-ssr
- @tanstack/query-example-svelte-star-wars
- @tanstack/query-example-vue-2.6-basic
- @tanstack/query-example-vue-2.7-basic
- @tanstack/query-example-vue-basic
- @tanstack/query-example-vue-dependent-queries
- @tanstack/query-example-vue-nuxt3
- @tanstack/query-example-vue-persister
- @tanstack/query-example-vue-simple
@tanstack/angular-query-devtools-experimental
npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9449
@tanstack/angular-query-experimental
npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9449
@tanstack/eslint-plugin-query
npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9449
@tanstack/query-async-storage-persister
npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9449
@tanstack/query-broadcast-client-experimental
npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9449
@tanstack/query-core
npm i https://pkg.pr.new/@tanstack/query-core@9449
@tanstack/query-devtools
npm i https://pkg.pr.new/@tanstack/query-devtools@9449
@tanstack/query-persist-client-core
npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9449
@tanstack/query-sync-storage-persister
npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9449
@tanstack/react-query
npm i https://pkg.pr.new/@tanstack/react-query@9449
@tanstack/react-query-devtools
npm i https://pkg.pr.new/@tanstack/react-query-devtools@9449
@tanstack/react-query-next-experimental
npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9449
@tanstack/react-query-persist-client
npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9449
@tanstack/solid-query
npm i https://pkg.pr.new/@tanstack/solid-query@9449
@tanstack/solid-query-devtools
npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9449
@tanstack/solid-query-persist-client
npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9449
@tanstack/svelte-query
npm i https://pkg.pr.new/@tanstack/svelte-query@9449
@tanstack/svelte-query-devtools
npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9449
@tanstack/svelte-query-persist-client
npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9449
@tanstack/vue-query
npm i https://pkg.pr.new/@tanstack/vue-query@9449
@tanstack/vue-query-devtools
npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9449
commit: 3ee21cf
why don’t we have the problem you’re describing here:
https://github.com/TanStack/query/blob/07cbfe1b364fea5833feb01273a5f661fe2d8ff6/packages/react-query/src/useQueries.ts#L282-L283
?
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 59.57%. Comparing base (cc45977) to head (3ee21cf).
Additional details and impacted files
@@ Coverage Diff @@
## main #9449 +/- ##
===========================================
+ Coverage 45.30% 59.57% +14.26%
===========================================
Files 208 137 -71
Lines 8283 5521 -2762
Branches 1872 1485 -387
===========================================
- Hits 3753 3289 -464
+ Misses 4085 1930 -2155
+ Partials 445 302 -143
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.