Skip to content

fix(react-query): types for useSuspenseQuery #5755

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 1 commit into from
Jul 21, 2023
+20 −8
Merged

fix(react-query): types for useSuspenseQuery #5755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 16 additions & 0 deletions packages/react-query/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type {
QueryKey,
QueryObserverOptions,
QueryObserverResult,
QueryObserverSuccessResult,
WithRequired,
} from '@tanstack/query-core'

Expand All @@ -36,6 +37,16 @@ export interface UseQueryOptions<
'queryKey'
> {}

export interface UseSuspenseQueryOptions<
TQueryFnData = unknown,
TError = DefaultError,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
> extends Omit<
UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
> {}
Comment on lines +40 to +48
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I thought It would be better that useSuspenseQuery have its QueryOptions type and Result type like UseQueryOptions, UseQueryResult for useQuery

If useSuspenseQuery should be provided as an API of the same hierarchy as useQuery, I thought it would be better to provide the types(UseSuspenseQueryOptions, UseSuspenseQueryResult) in the same hierarchy.


export interface UseInfiniteQueryOptions<
TQueryFnData = unknown,
TError = DefaultError,
Expand Down Expand Up @@ -65,6 +76,11 @@ export type UseQueryResult<
TError = DefaultError,
> = UseBaseQueryResult<TData, TError>

export type UseSuspenseQueryResult<
TData = unknown,
TError = DefaultError,
> = Omit<QueryObserverSuccessResult<TData, TError>, 'isPlaceholderData'>
Comment on lines +79 to +82
Copy link
Collaborator Author

@manudeli manudeli Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I thought If we don't have enabled option and have default suspense option, we don't have to use DefinedUseQueryResult containing unnecessary QueryObserverRefetchErrorResult.

type DefinedQueryObserverResult<TData = unknown, TError = DefaultError> = QueryObserverRefetchErrorResult<TData, TError> | QueryObserverSuccessResult<TData, TError>;

We just need only QueryObserverSuccessResult for useSuspenseQuery.
So we could remove isSuccess: false, error, isError: true etc to do type-narrow

interface QueryObserverRefetchErrorResult<TData = unknown, TError = DefaultError> extends QueryObserverBaseResult<TData, TError> {
    data: TData;
    error: TError;
    isError: true;
    isPending: false;
    isLoadingError: false;
    isRefetchError: true;
    isSuccess: false;
    status: 'error';
}
interface QueryObserverSuccessResult<TData = unknown, TError = DefaultError> extends QueryObserverBaseResult<TData, TError> {
    data: TData;
    error: null;
    isError: false;
    isPending: false;
    isLoadingError: false;
    isRefetchError: false;
    isSuccess: true;
    status: 'success';
}


export type DefinedUseQueryResult<
TData = unknown,
TError = DefaultError,
Expand Down
12 changes: 4 additions & 8 deletions packages/react-query/src/useSuspenseQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
'use client'
import { QueryObserver } from '@tanstack/query-core'
import { useBaseQuery } from './useBaseQuery'
import type { UseQueryOptions } from './types'
import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'
import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
import type { DefinedUseQueryResult } from './types'

export function useSuspenseQuery<
TQueryFnData = unknown,
TError = DefaultError,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
options: Omit<
UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
>,
options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
queryClient?: QueryClient,
): Omit<DefinedUseQueryResult<TData, TError>, 'isPlaceholderData'> {
): UseSuspenseQueryResult<TData, TError> {
return useBaseQuery(
{
...options,
Expand All @@ -26,5 +22,5 @@ export function useSuspenseQuery<
},
QueryObserver,
queryClient,
) as DefinedUseQueryResult<TData, TError>
) as UseSuspenseQueryResult<TData, TError>
}