Skip to content

fix(react-query): Allow optional initialData in infiniteQueryOptions #8154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 9, 2024
Merged

fix(react-query): Allow optional initialData in infiniteQueryOptions #8154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a019cb
fix(react-query): Allow optional initialData in infiniteQueryoptions
Oct 9, 2024
8d05ffe
fixup! fix(react-query): Allow optional initialData in infiniteQueryo…
Oct 9, 2024
45db433
Merge branch 'main' into infinite-query-options-type-issue
TkDodo Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { infiniteQueryOptions } from '../infiniteQueryOptions'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
import { useQuery } from '../useQuery'
import type { InfiniteData } from '@tanstack/query-core'
import type { InfiniteData, InitialDataFunction } from '@tanstack/query-core'

describe('queryOptions', () => {
it('should not allow excess properties', () => {
Expand Down Expand Up @@ -152,4 +152,23 @@ describe('queryOptions', () => {
// @ts-expect-error cannot pass infinite options to non-infinite query functions
queryClient.prefetchQuery(options)
})

test('allow optional initialData', () => {
const initialData: { example: boolean } | undefined = { example: true }
const queryOptions = infiniteQueryOptions({
queryKey: ['example'],
queryFn: async () => initialData,
// initialData below errors
initialData: initialData
? () => ({ pages: [initialData], pageParams: [] })
: undefined,
getNextPageParam: () => 1,
initialPageParam: 1,
})
queryOptions.initialData
expectTypeOf(queryOptions.initialData).toMatchTypeOf<
| InitialDataFunction<InfiniteData<{ example: boolean }, number>>
| undefined
>()
})
})
7 changes: 6 additions & 1 deletion packages/react-query/src/infiniteQueryOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type {
DataTag,
DefaultError,
InfiniteData,
InitialDataFunction,
QueryKey,
} from '@tanstack/query-core'
import type { UseInfiniteQueryOptions } from './types'
Expand All @@ -20,7 +21,11 @@ export type UndefinedInitialDataInfiniteOptions<
TQueryKey,
TPageParam
> & {
initialData?: undefined
initialData?:
| undefined
| InitialDataFunction<
NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
Copy link
Contributor

@jimmycallin jimmycallin Oct 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this have been something like

  initialData?:
    | undefined
    | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
    | InitialDataFunction<
        NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>

to allow passing initialData as object and not within a callback function?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can pass initialData as an object via DefinedInitialDataInfiniteOptions:

query/packages/react-query/src/infiniteQueryOptions.ts

Lines 41 to 45 in febbde6

> & {
initialData:
| NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>
| (() => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>)
}

Copy link
Contributor

@jimmycallin jimmycallin Oct 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, but it still won't work conditionally, see this modified playground based on the original example:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE8AaOA-Q4siygeTBmAm1TgF84uKBBBwARAAEYAQx4yAxgGsA9FHTT5MALQBHclTEBuAFDHcybJq7YUGAOpRpYMBQAUSAkWDSANgBFpGX4ALkQ6Rm9-QOkAflCkdAAPaXAfdFCYKHJ+fgBKRGM4OHluVHg9FnZOUrgAXnCGIlJ9Ng5rVHdCorgKqgBpdEpQgG0xJJSwNLEAXWouot7KADFsUOlUSks4V3zagD5wr18AmTnuw85j6NDPS6iZee6YsLBpAHN0VBHbyJPpWbgrw+AAVpI4QF84MNpvxHkVQhYACboBjoRFnbofGAAOSSMFBILBKVCOzqBwAjBiij9fAT0KDwaFKV0+LkTHxTOZLNUbGh0A4nC4oMwqO4Lr9oiEwjT7rF4nBxql0nBMtkBKyCkU1DBkFBeRgcI0mC1OudFgMhlCxsklTMqT0Wis1hstqT9uKrqdHjK-jcIp7pHC4M8kEDPt9-bKAWGGSlIdDYed4ShsMjUejHljcYl8e96USQCTdhT7TK6bHC3BmUVWeygA

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay then what’s the fix please 😅

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made a PR here :) #8157

Hope that clarifies things, or perhaps I'm misunderstanding something!

>
}

type NonUndefinedGuard<T> = T extends undefined ? never : T
Expand Down
Loading