Skip to content

Commit

Permalink
fix(react-query): make @suspensive/react-query v2 all naming conventi…
Browse files Browse the repository at this point in the history
…on correctly like @tanstack/react-query v5 (#401)

fix #253 

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
  • Loading branch information
manudeli committed Jan 21, 2024
1 parent 20b5378 commit d06e883
Show file tree
Hide file tree
Showing 8 changed files with 228 additions and 647 deletions.
5 changes: 5 additions & 0 deletions .changeset/eight-peas-hear.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@suspensive/react-query': major
---

fix(react-query): @suspensive/react-query v2's all naming convention correctly like @tanstack/react-query v5
16 changes: 4 additions & 12 deletions packages/react-query/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
export { useSuspenseQuery } from './useSuspenseQuery'
export type {
BaseUseSuspenseQueryResult,
UseSuspenseQueryOptions,
UseSuspenseQueryResultOnLoading,
UseSuspenseQueryResultOnSuccess,
} from './useSuspenseQuery'
export type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './useSuspenseQuery'
export { useSuspenseQueries } from './useSuspenseQueries'
export type { SuspenseQueriesOptions, SuspenseQueriesResults } from './useSuspenseQueries'
export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
export type {
BaseUseSuspenseInfiniteQueryResult,
UseSuspenseInfiniteQueryOptions,
UseSuspenseInfiniteQueryResultOnLoading,
UseSuspenseInfiniteQueryResultOnSuccess,
} from './useSuspenseInfiniteQuery'
export type { UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult } from './useSuspenseInfiniteQuery'

export { QueryErrorBoundary } from './QueryErrorBoundary'
121 changes: 60 additions & 61 deletions packages/react-query/src/useSuspenseInfiniteQuery.test-d.ts
Original file line number Diff line number Diff line change
@@ -1,73 +1,72 @@
/* eslint-disable react-hooks/rules-of-hooks */
import type { InfiniteData } from '@tanstack/react-query'
import { expectTypeOf } from 'vitest'
import { describe, expectTypeOf, it } from 'vitest'
import { useSuspenseInfiniteQuery } from '../dist'

const queryKey = ['key'] as const
const queryFn = () => 'response' as const
const boolean = Math.random() > 0.5

type AwaitedQueryFnReturn = Awaited<ReturnType<typeof queryFn>>
// @ts-expect-error no arg
useSuspenseInfiniteQuery()

// arg1:queryKey, arg2: queryFn, arg3: options
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, queryFn, {
enabled: true,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn>>()
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, queryFn, {
enabled: boolean,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn> | undefined>()
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, queryFn, {
enabled: false,
}).data
).toEqualTypeOf<undefined>()
// @ts-expect-error no suspense
useSuspenseInfiniteQuery({ queryKey, queryFn, suspense: boolean })
// @ts-expect-error no suspense
useSuspenseInfiniteQuery(queryKey, { queryFn, suspense: boolean })
// @ts-expect-error no suspense
useSuspenseInfiniteQuery(queryKey, queryFn, { suspense: boolean })

// arg1:queryKey, arg2: options
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, {
queryFn,
enabled: true,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn>>()
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, {
queryFn,
enabled: boolean,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn> | undefined>()
expectTypeOf(
useSuspenseInfiniteQuery(queryKey, {
queryFn,
enabled: false,
}).data
).toEqualTypeOf<undefined>()
// @ts-expect-error no useErrorBoundary
useSuspenseInfiniteQuery({ queryKey, queryFn, useErrorBoundary: boolean })
// @ts-expect-error no useErrorBoundary
useSuspenseInfiniteQuery(queryKey, { queryFn, useErrorBoundary: boolean })
// @ts-expect-error no useErrorBoundary
useSuspenseInfiniteQuery(queryKey, queryFn, { useErrorBoundary: boolean })

// arg1: options
expectTypeOf(
useSuspenseInfiniteQuery({
queryKey,
queryFn,
enabled: true,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn>>()
expectTypeOf(
useSuspenseInfiniteQuery({
queryKey,
queryFn,
enabled: boolean,
}).data
).toEqualTypeOf<InfiniteData<AwaitedQueryFnReturn> | undefined>()
expectTypeOf(
useSuspenseInfiniteQuery({
queryKey,
queryFn,
enabled: false,
}).data
).toEqualTypeOf<undefined>()
// @ts-expect-error no enabled
useSuspenseInfiniteQuery({ queryKey, queryFn, enabled: boolean })
// @ts-expect-error no enabled
useSuspenseInfiniteQuery(queryKey, { queryFn, enabled: boolean })
// @ts-expect-error no enabled
useSuspenseInfiniteQuery(queryKey, queryFn, { enabled: boolean })

// @ts-expect-error no arg
useSuspenseInfiniteQuery()
// @ts-expect-error no placeholderData
useSuspenseInfiniteQuery({ queryKey, queryFn, placeholderData: boolean })
// @ts-expect-error no placeholderData
useSuspenseInfiniteQuery(queryKey, { queryFn, placeholderData: boolean })
// @ts-expect-error no placeholderData
useSuspenseInfiniteQuery(queryKey, queryFn, { placeholderData: boolean })

// @ts-expect-error no isPlaceholderData
useSuspenseInfiniteQuery(queryKey, queryFn).isPlaceholderData
// @ts-expect-error no isPlaceholderData
useSuspenseInfiniteQuery(queryKey, queryFn, {}).isPlaceholderData
// @ts-expect-error no isPlaceholderData
useSuspenseInfiniteQuery(queryKey, { queryFn }).isPlaceholderData
// @ts-expect-error no isPlaceholderData
useSuspenseInfiniteQuery({ queryKey, queryFn }).isPlaceholderData

describe('useSuspenseInfiniteQuery', () => {
it("'s type check", () => {
// data is always defined
expectTypeOf(useSuspenseInfiniteQuery(queryKey, queryFn).data).toEqualTypeOf<
InfiniteData<Awaited<ReturnType<typeof queryFn>>>
>()
expectTypeOf(useSuspenseInfiniteQuery(queryKey, queryFn, {}).data).toEqualTypeOf<
InfiniteData<Awaited<ReturnType<typeof queryFn>>>
>()
expectTypeOf(useSuspenseInfiniteQuery(queryKey, { queryFn }).data).toEqualTypeOf<
InfiniteData<Awaited<ReturnType<typeof queryFn>>>
>()
expectTypeOf(useSuspenseInfiniteQuery({ queryKey, queryFn }).data).toEqualTypeOf<
InfiniteData<Awaited<ReturnType<typeof queryFn>>>
>()

// status is always 'success'
expectTypeOf(useSuspenseInfiniteQuery(queryKey, queryFn).status).toEqualTypeOf<'success'>()
expectTypeOf(useSuspenseInfiniteQuery(queryKey, queryFn, {}).status).toEqualTypeOf<'success'>()
expectTypeOf(useSuspenseInfiniteQuery(queryKey, { queryFn }).status).toEqualTypeOf<'success'>()
expectTypeOf(useSuspenseInfiniteQuery({ queryKey, queryFn }).status).toEqualTypeOf<'success'>()
})
})
140 changes: 19 additions & 121 deletions packages/react-query/src/useSuspenseInfiniteQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,27 @@ import {
useInfiniteQuery,
} from '@tanstack/react-query'

export type BaseUseSuspenseInfiniteQueryResult<TData = unknown> = Omit<
UseInfiniteQueryResult<TData>,
'error' | 'isLoadingError' | 'isError' | 'isRefetchError' | 'isFetching'
> & { status: 'success' | 'loading' }

export interface UseSuspenseInfiniteQueryResultOnSuccess<TData> extends BaseUseSuspenseInfiniteQueryResult<TData> {
export interface UseSuspenseInfiniteQueryResult<TData = unknown, TError = unknown>
extends Omit<
UseInfiniteQueryResult<TData, TError>,
keyof Pick<UseInfiniteQueryResult<TData, TError>, 'isPlaceholderData'>
> {
data: InfiniteData<TData>
isLoading: false
isSuccess: true
status: 'success'
}
export interface UseSuspenseInfiniteQueryResultOnLoading extends BaseUseSuspenseInfiniteQueryResult {
data: undefined
isLoading: true
isSuccess: false
status: 'loading'
}

export type UseSuspenseInfiniteQueryOptions<
export interface UseSuspenseInfiniteQueryOptions<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
> = Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'suspense'>
> extends Omit<
UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData'
> {}

/**
* This hook wrapping useInfiniteQuery of @tanstack/react-query with default suspense option. with this hook, you don't have to make unnecessary type narrowing
* This hook is wrapping useInfiniteQuery of @tanstack/react-query v4 with default suspense option.
* @see {@link https://suspensive.org/docs/react-query/useSuspenseInfiniteQuery}
*/
// arg1: queryKey, arg2: queryFn, arg3: options
Expand All @@ -46,84 +40,9 @@ export function useSuspenseInfiniteQuery<
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: Omit<
UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
'enabled' | 'queryKey' | 'queryFn'
>
): UseSuspenseInfiniteQueryResultOnSuccess<TData>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options: Omit<
UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
'enabled' | 'queryKey' | 'queryFn'
> & {
enabled?: true
}
): UseSuspenseInfiniteQueryResultOnSuccess<TData>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options: Omit<
UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
'enabled' | 'queryKey' | 'queryFn'
> & {
enabled: false
}
): UseSuspenseInfiniteQueryResultOnLoading
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
): UseSuspenseInfiniteQueryResultOnSuccess<TData> | UseSuspenseInfiniteQueryResultOnLoading

options?: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
): UseSuspenseInfiniteQueryResult<TData, TError>
// arg1: queryKey, arg2: options
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
options?: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled' | 'queryKey'>
): UseSuspenseInfiniteQueryResultOnSuccess<TData>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled' | 'queryKey'> & {
enabled?: true
}
): UseSuspenseInfiniteQueryResultOnSuccess<TData>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled' | 'queryKey'> & {
enabled: false
}
): UseSuspenseInfiniteQueryResultOnLoading
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
Expand All @@ -132,39 +51,16 @@ export function useSuspenseInfiniteQuery<
>(
queryKey: TQueryKey,
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>
): UseSuspenseInfiniteQueryResultOnSuccess<TData> | UseSuspenseInfiniteQueryResultOnLoading

): UseSuspenseInfiniteQueryResult<TData, TError>
// arg1: options
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
enabled?: true
}
): UseSuspenseInfiniteQueryResultOnSuccess<TData>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
enabled: false
}
): UseSuspenseInfiniteQueryResultOnLoading
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
options: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseSuspenseInfiniteQueryResultOnSuccess<TData> | UseSuspenseInfiniteQueryResultOnLoading

// base useSuspenseInfiniteQuery
): UseSuspenseInfiniteQueryResult<TData, TError>
export function useSuspenseInfiniteQuery<
TQueryFnData = unknown,
TError = unknown,
Expand All @@ -176,9 +72,11 @@ export function useSuspenseInfiniteQuery<
| QueryFunction<TQueryFnData, TQueryKey>
| Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>,
arg3?: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
) {
): UseSuspenseInfiniteQueryResult<TData, TError> {
return useInfiniteQuery({
...parseQueryArgs(arg1, arg2, arg3),
enabled: true,
suspense: true,
}) as BaseUseSuspenseInfiniteQueryResult<TData>
useErrorBoundary: true,
}) as UseSuspenseInfiniteQueryResult<TData, TError>
}

0 comments on commit d06e883

Please sign in to comment.