fix(react-query): prevent type errors and improve inference for dynamic queries on useQueries, useSuspenseQueries and createQueries #8624
Conversation
…ic queries on useQueries and useSuspenseQueries Previously, using useQueries and useSuspenseQueries with a dynamic array of mixed queries caused type errors. This commit ensures that type errors no longer occur and that the returned data is correctly inferred (e.g., as (number | boolean | undefined)[]) instead of unknown[].
|
View your CI Pipeline Execution ↗ for commit d3cce4c.
☁️ Nx Cloud last updated this comment at |
| @@ -1621,4 +1621,65 @@ describe('useQueries', () => { | |||
| ), | |||
| ) | |||
| }) | |||
|
|
|||
| it('should return correct data for dynamic queries with mixed result types', async () => { | |||
There was a problem hiding this comment.
type only tests should please go towards the dedicated .test-d.tsx files:
packages/react-query/src/__tests__/useQueries.test-d.tsxpackages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx
There was a problem hiding this comment.
Okay, I will fix this.
@TkDodo I don't know vue.js😢 Can you merge this one and let another guy fix the vue's useQueries? |
|
if you search for |
How should I refactor this? Actually, I did not change the |
|
this was just a pointer to get you to the right files. The TypeScript types should be very similar, so I guess you’d just do the same thing again? |
|
but some type-tests are failing so I suggest you look at them first |
I solved the type-tests failing, and also fixed vue-query. @TkDodo |
|
|
Oh, I missed them. I will work on them. Thank you! |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #8624 +/- ##
===========================================
+ Coverage 46.28% 80.46% +34.18%
===========================================
Files 199 94 -105
Lines 7549 1628 -5921
Branches 1729 383 -1346
===========================================
- Hits 3494 1310 -2184
+ Misses 3675 263 -3412
+ Partials 380 55 -325
|
|
@TkDodo I failed to understand the Angular testing syntax, so I couldn't work on it. |
this is still missing please |
I've fix this one. I'm not sure if it is correct. Can you check it out? Doing like expectTypeOf(result[0].data).toEqualTypeOf<number | boolean | undefined>()made the test fail because result[0] is possibly undefined, so I added the if statement. |
|
does optional chaining not work? |
Nope, it doesn't work :( |
Actually I tried it again, and it works on useQueries! Sorry for the confusion. |
const result = useSuspenseQueries({
queries: [...queries1List, { ...Queries2.get() }],
})
expectTypeOf(result[0].data).toEqualTypeOf<number | boolean>()The type error is shown because result[0] is possibly undefined. However, this test passes. expectTypeOf(result).toEqualTypeOf<
[
...Array<UseSuspenseQueryResult<number, Error>>,
UseSuspenseQueryResult<boolean, Error>,
]
>()Then, it means that result has at least one element. It means result[0] should not be undefined. Should I just remove the test? I think the |
|
ok |
|
@TkDodo The test failed on Nx agents, can you check on this? |
|
angular is still erroring |
|
@TkDodo I rollbacked injectQueries to original code. I guess my method does not work on angular-queries by some reason. Can you merge it and let somebody work on angular-queries? I tried for almost a week but could not solve it :( |
|
Hi, when I (or somebody else who wants to contribute that) will rewrite It's probably not worth it right now to put much effort into this as I regret I haven't been able to work on |
Got it. I hope the issue gets resolved soon. |
gs18004
changed the title
|
Hi @gs18004 @TkDodo 😄 With this release I noticed that it breaks the types, when using useSuspenseQueries used together with spreaded queryOptions. Simplified examlpe: const [{ data: myData }] = useSuspenseQueries({
queries: [
{
...myQueryOptions(),
select(data: MyData[]) {
return data.filter((a) => a.id === id);
},
},
{
...
}
],
});
function myQueryOptions() {
return queryOptions({
queryKey: ["my-key"],
queryFn: async () => {
const res = await fetch(...);
return await res.json();
},
});
}Now the types don't work anymore. The error I get is this: Type '(data: MyData[]) => MyData[]' is not assignable to type '(data: unknown) => unknown'.
Types of parameters 'data' and 'data' are incompatible.
Type 'unknown' is not assignable to type 'CredentialSchemaLite[]'.
245 select(data: MyData[]) {Also, I don't get any autocompletion inside the queries array of the useSuspenseQueries hook. Would be great if this issue could be resolved, in the meantime I will just use version 5.66.8 😄 |
|
Okay, I will fix this. Thank you😄 |
closes #7974
Previously, using useQueries and useSuspenseQueries with a dynamic array of mixed queries caused type errors. This commit ensures that type errors no longer occur and that the returned data is correctly inferred (e.g., as (number | boolean | undefined)[]) instead of unknown[].