Skip to content

fix(types): adds queryKey generic to queryClient functions #2100

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
TkDodo merged 2 commits into from
Apr 8, 2021
Merged

fix(types): adds queryKey generic to queryClient functions #2100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15de9ce
fix(types): adds queryKey generic to queryClient functions
DiederikvandenB Apr 8, 2021
bc91d03
test(clientQuery): adds tests for type-errors when using strict keys
DiederikvandenB Apr 8, 2021
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
128 changes: 75 additions & 53 deletions src/core/queryClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,24 +252,24 @@ export class QueryClient {
return promise
}

fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
options: FetchQueryOptions<TQueryFnData, TError, TData>
fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<TData>
fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
queryKey: QueryKey,
options?: FetchQueryOptions<TQueryFnData, TError, TData>
fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
queryKey: TQueryKey,
options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<TData>
fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
queryKey: QueryKey,
queryFn: QueryFunction<TQueryFnData>,
options?: FetchQueryOptions<TQueryFnData, TError, TData>
fetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<TData>
fetchQuery<TQueryFnData, TError, TData = TQueryFnData>(
arg1: QueryKey | FetchQueryOptions<TQueryFnData, TError, TData>,
fetchQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
arg1: TQueryKey | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg2?:
| QueryFunction<TQueryFnData>
| FetchQueryOptions<TQueryFnData, TError, TData>,
arg3?: FetchQueryOptions<TQueryFnData, TError, TData>
| QueryFunction<TQueryFnData, TQueryKey>
| FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg3?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<TData> {
const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
const defaultedOptions = this.defaultQueryOptions(parsedOptions)
Expand All @@ -286,22 +286,22 @@ export class QueryClient {
: Promise.resolve(query.state.data as TData)
}

prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
options: FetchQueryOptions<TQueryFnData, TError, TData>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
queryKey: QueryKey,
options?: FetchQueryOptions<TQueryFnData, TError, TData>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
queryKey: TQueryKey,
options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
queryKey: QueryKey,
queryFn: QueryFunction,
options?: FetchQueryOptions<TQueryFnData, TError, TData>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
arg1: QueryKey | FetchQueryOptions<TQueryFnData, TError, TData>,
arg2?: QueryFunction | FetchQueryOptions<TQueryFnData, TError, TData>,
arg3?: FetchQueryOptions<TQueryFnData, TError, TData>
prefetchQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
arg1: TQueryKey | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg2?: QueryFunction<TQueryFnData, TQueryKey> | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg3?: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void> {
return this.fetchQuery(arg1 as any, arg2 as any, arg3)
.then(noop)
Expand All @@ -311,33 +311,36 @@ export class QueryClient {
fetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<InfiniteData<TData>>
fetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
queryKey: QueryKey,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
queryKey: TQueryKey,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<InfiniteData<TData>>
fetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
queryKey: QueryKey,
queryFn: QueryFunction<TQueryFnData>,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<InfiniteData<TData>>
fetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData>(
arg1: QueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData>,
fetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
arg1: TQueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg2?:
| QueryFunction<TQueryFnData>
| FetchInfiniteQueryOptions<TQueryFnData, TError, TData>,
arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData>
| QueryFunction<TQueryFnData, TQueryKey>
| FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<InfiniteData<TData>> {
const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
parsedOptions.behavior = infiniteQueryBehavior<
Expand All @@ -348,20 +351,39 @@ export class QueryClient {
return this.fetchQuery(parsedOptions)
}

prefetchInfiniteQuery(options: FetchInfiniteQueryOptions): Promise<void>
prefetchInfiniteQuery(
queryKey: QueryKey,
options?: FetchInfiniteQueryOptions
prefetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchInfiniteQuery(
queryKey: QueryKey,
queryFn: QueryFunction,
options?: FetchInfiniteQueryOptions
prefetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
queryKey: TQueryKey,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchInfiniteQuery(
arg1: QueryKey | FetchInfiniteQueryOptions,
arg2?: QueryFunction | FetchInfiniteQueryOptions,
arg3?: FetchInfiniteQueryOptions
prefetchInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void>
prefetchInfiniteQuery<TQueryFnData, TError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
arg1: TQueryKey | FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg2?:
| QueryFunction<TQueryFnData, TQueryKey>
| FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
arg3?: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): Promise<void> {
return this.fetchInfiniteQuery(arg1 as any, arg2 as any, arg3)
.then(noop)
Expand Down
76 changes: 75 additions & 1 deletion src/core/tests/queryClient.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { sleep, queryKey, mockConsoleError } from '../../react/tests/utils'
import { QueryCache, QueryClient, QueryObserver } from '../..'
import { QueryCache, QueryClient, QueryFunction, QueryObserver } from '../..'

describe('queryClient', () => {
let queryClient: QueryClient
Expand Down Expand Up @@ -186,6 +186,23 @@ describe('queryClient', () => {
})

describe('fetchQuery', () => {
test('should not type-error with strict query key', async () => {
type StrictData = 'data'
type StrictQueryKey = ['strict', string]
const key: StrictQueryKey = ['strict', queryKey()]

const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
Promise.resolve('data')
)

await expect(
queryClient.fetchQuery<StrictData, any, StrictData, StrictQueryKey>(
key,
fetchFn,
)
).resolves.toEqual('data')
})

// https://github.com/tannerlinsley/react-query/issues/652
test('should not retry by default', async () => {
const consoleMock = mockConsoleError()
Expand Down Expand Up @@ -282,6 +299,28 @@ describe('queryClient', () => {
})

describe('fetchInfiniteQuery', () => {
test('should not type-error with strict query key', async () => {
type StrictData = string
type StrictQueryKey = ['strict', string]
const key: StrictQueryKey = ['strict', queryKey()]

const data = {
pages: ['data'],
pageParams: [undefined],
}

const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
Promise.resolve(data.pages[0])
)

await expect(
queryClient.fetchInfiniteQuery<StrictData, any, StrictData, StrictQueryKey>(
key,
fetchFn,
)
).resolves.toEqual(data)
})

test('should return infinite query data', async () => {
const key = queryKey()
const result = await queryClient.fetchInfiniteQuery(
Expand All @@ -301,6 +340,25 @@ describe('queryClient', () => {
})

describe('prefetchInfiniteQuery', () => {
test('should not type-error with strict query key', async () => {
type StrictData = 'data'
type StrictQueryKey = ['strict', string]
const key: StrictQueryKey = ['strict', queryKey()]

const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
Promise.resolve('data')
)

await queryClient.prefetchInfiniteQuery<StrictData, any, StrictData, StrictQueryKey>(key, fetchFn)

const result = queryClient.getQueryData(key)

expect(result).toEqual({
pages: ['data'],
pageParams: [undefined],
})
})

test('should return infinite query data', async () => {
const key = queryKey()

Expand All @@ -318,6 +376,22 @@ describe('queryClient', () => {
})

describe('prefetchQuery', () => {
test('should not type-error with strict query key', async () => {
type StrictData = 'data'
type StrictQueryKey = ['strict', string]
const key: StrictQueryKey = ['strict', queryKey()]

const fetchFn: QueryFunction<StrictData, StrictQueryKey> = () => (
Promise.resolve('data')
)

await queryClient.prefetchQuery<StrictData, any, StrictData, StrictQueryKey>(key, fetchFn);

const result = queryClient.getQueryData(key);

expect(result).toEqual('data')
})

test('should return undefined when an error is thrown', async () => {
const consoleMock = mockConsoleError()

Expand Down
10 changes: 6 additions & 4 deletions src/core/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,9 @@ export interface InfiniteQueryObserverOptions<
export interface FetchQueryOptions<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData
> extends QueryOptions<TQueryFnData, TError, TData> {
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
> extends QueryOptions<TQueryFnData, TError, TData, TQueryKey> {
/**
* The time in milliseconds after data is considered stale.
* If the data is fresh it will be returned from the cache.
Expand All @@ -222,8 +223,9 @@ export interface FetchQueryOptions<
export interface FetchInfiniteQueryOptions<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData
> extends FetchQueryOptions<TQueryFnData, TError, InfiniteData<TData>> {}
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
> extends FetchQueryOptions<TQueryFnData, TError, InfiniteData<TData>, TQueryKey> {}

export interface ResultOptions {
throwOnError?: boolean
Expand Down