Open ShacharHarshuv opened 2 weeks ago
Opened a PR that fixes this: https://github.com/TanStack/query/pull/7351
Hi @TkDodo I'm not sure about this one. Code is identical to React adapter and I don't think initialData is supposed to be able to undefined?
The problematic types are defined in angular-query-experimental.
If an undefined return type is not supported than I'm not sure how the common use case will work. This example (from the docs) currently wouldn't work:
result = injectQuery(() => ({
queryKey: ['todo', this.todoId()],
queryFn: () => fetch('/todos'),
initialData: () => {
// Use a todo from the 'todos' query as the initial data for this todo query
return this.queryClient
.getQueryData(['todos'])
?.find((d) => d.id === this.todoId())
},
}))
Also, this works in react-query:
const x = useQuery({
initialData: () => undefined,
})
it should work, but it also doesn't work in react query:
I don't think your proposed solution is right though. I think we should rather extend UndefinedInitialDataOptions
to be:
export type UndefinedInitialDataOptions<
TQueryFnData = unknown,
TError = DefaultError,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
- initialData?: undefined
- initialData?: undefined | () => undefined
}
thoughts ?
sorry, that doesn't work. This seems to be the correct diff:
- initialData?: undefined
+ initialData?: undefined | InitialDataFunction<TQueryFnData>
okay interestingly, we have test that cover this case already, and they don't fail:
🤔
I don't think your proposed solution is right though. I think we should rather extend UndefinedInitialDataOptions
When looking at the types more closely I believe you are correct.
According to my understanding the idea is that UndefinedInitialDataOptions
will return query result where data
is possibly undefined, while DefinedInitialDataOptions
returns query result where the data
is required, so the consumer wouldn't need to handle the optional undefined
value. According to that logic the option of () => T | undefined
can result in a query that is possibly undefined, so it should be in the UndefinedInitlaDataOptions
(Even though it's confusing, because the initialData
is technically "defined").
I'll fix the PR accordingly.
okay interestingly, we have test that cover this case already, and they don't fail:
It doesn't fail because you use useQuery
directly. The bug (both in angular and react) reproduces when you use queryOptions
I fixed the PR per feedback: https://github.com/TanStack/query/pull/7351
Describe the bug
In angular-query When using
queryOptions
'@tanstack/angular-query-experimental'
and passing an initial value function, typescript will not allow that typescript to return undefined. The following code will not compile:This should be allowed because I might want to check if I have this particular "todo" item in the cache, and if I don't, I would want angular query to request that item. Since this is conditional, I have to put it in a function that might either have a todo or not (in the example I set it to undefined just for the example).
I believe this has to do with this type definition:
Which should be changed to:
Your minimal, reproducible example
https://stackblitz.com/edit/stackblitz-starters-jdj53x?file=src%2Fmain.ts
Steps to reproduce
export const todoQueryOption = (id: string | null) => queryOptions({ queryKey: ['todo', id], queryFn: () => Promise.resolve({ id: '1', title: 'Do Laundry', }), initialData: (): Todo | undefined => undefined, });