@suspensive/react-query-4 0.0.1-beta.0

package/src/SuspenseInfiniteQuery.tsx

@@ -0,0 +1,22 @@
+import type { QueryKey } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import {
+  type UseSuspenseInfiniteQueryOptions,
+  type UseSuspenseInfiniteQueryResult,
+  useSuspenseInfiniteQuery,
+} from './useSuspenseInfiniteQuery'
+
+/**
+ * @experimental This is experimental feature.
+ */
+export const SuspenseInfiniteQuery = <
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>({
+  children,
+  ...options
+}: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  children: (query: UseSuspenseInfiniteQueryResult<TData, TError>) => ReactNode
+}) => <>{children(useSuspenseInfiniteQuery(options))}</>

package/src/SuspenseQueries.test-d.tsx

@@ -0,0 +1,54 @@
+import { queryFn, queryKey } from '@suspensive/test-utils'
+import type { ReactNode } from 'react'
+import { describe, expectTypeOf, it } from 'vitest'
+import { SuspenseQueries } from './SuspenseQueries'
+import type { UseSuspenseQueryResult } from './useSuspenseQuery'
+
+describe('<SuspenseQueries/>', () => {
+  it('type check', () => {
+    ;() => (
+      <SuspenseQueries queries={[{ queryKey, queryFn }]}>
+        {([
+          query1,
+          // @ts-expect-error Tuple type '[UseSuspenseQueryResult<{ text: string; }, unknown>]' of length '1' has no element at index '1'.
+          query2,
+          // @ts-expect-error Tuple type '[UseSuspenseQueryResult<{ text: string; }, unknown>]' of length '1' has no element at index '2'.
+          query3,
+        ]) => {
+          expectTypeOf(query1).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
+          expectTypeOf(query2).toEqualTypeOf<undefined>()
+          expectTypeOf(query3).toEqualTypeOf<undefined>()
+          return <></>
+        }}
+      </SuspenseQueries>
+    )
+    ;() => (
+      <SuspenseQueries
+        queries={[
+          { queryKey, queryFn },
+          { queryKey, queryFn },
+        ]}
+      >
+        {([
+          query1,
+
+          query2,
+          // @ts-expect-error Tuple type '[UseSuspenseQueryResult<{ text: string; }, unknown>]' of length '1' has no element at index '2'.
+          query3,
+        ]) => {
+          expectTypeOf(query1).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
+          expectTypeOf(query2).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
+          expectTypeOf(query3).toEqualTypeOf<undefined>()
+          return <></>
+        }}
+      </SuspenseQueries>
+    )
+
+    expectTypeOf(
+      <SuspenseQueries queries={[{ queryKey, queryFn }]}>{() => <></>}</SuspenseQueries>
+    ).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <SuspenseQueries queries={[{ queryKey, queryFn }]}>{() => <></>}</SuspenseQueries>
+    ).not.toEqualTypeOf<ReactNode>()
+  })
+})

package/src/SuspenseQueries.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react'
+import { type SuspenseQueriesOptions, type SuspenseQueriesResults, useSuspenseQueries } from './useSuspenseQueries'
+
+/**
+ * @experimental This is experimental feature.
+ */
+export function SuspenseQueries<T extends any[]>({
+  children,
+  queries,
+}: {
+  queries: readonly [...SuspenseQueriesOptions<T>]
+  children: (queries: SuspenseQueriesResults<T>) => ReactNode
+}) {
+  return <>{children(useSuspenseQueries({ queries }))}</>
+}

package/src/SuspenseQuery.test-d.tsx

@@ -0,0 +1,94 @@
+import { queryFn, queryKey } from '@suspensive/test-utils'
+import type { ReactNode } from 'react'
+import { describe, expectTypeOf, it } from 'vitest'
+import { SuspenseQuery } from './SuspenseQuery'
+import type { UseSuspenseQueryResult } from './useSuspenseQuery'
+
+describe('<SuspenseQuery/>', () => {
+  it('type error', () => {
+    ;() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no suspense
+        suspense={boolean}
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    )
+    ;() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no useErrorBoundary
+        useErrorBoundary={boolean}
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    )
+    ;() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no enabled
+        enabled={boolean}
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    )
+    ;() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no placeholderData
+        placeholderData="placeholder"
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    )
+    ;() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no placeholderData
+        placeholderData="placeholder"
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    )
+  })
+
+  it('type check', () => {
+    ;() => (
+      <SuspenseQuery queryKey={queryKey} queryFn={queryFn}>
+        {(query) => {
+          expectTypeOf(query).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
+          expectTypeOf(query.data).toEqualTypeOf<{ text: string }>()
+          expectTypeOf(query.status).toEqualTypeOf<'success'>()
+          return <></>
+        }}
+      </SuspenseQuery>
+    )
+    ;() => (
+      <SuspenseQuery queryKey={queryKey} queryFn={queryFn} select={(data) => data.text}>
+        {(selectedQuery) => {
+          expectTypeOf(selectedQuery).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+          expectTypeOf(selectedQuery.data).toEqualTypeOf<string>()
+          expectTypeOf(selectedQuery.status).toEqualTypeOf<'success'>()
+          return <></>
+        }}
+      </SuspenseQuery>
+    )
+
+    expectTypeOf(
+      <SuspenseQuery queryKey={queryKey} queryFn={queryFn}>
+        {() => <></>}
+      </SuspenseQuery>
+    ).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <SuspenseQuery queryKey={queryKey} queryFn={queryFn}>
+        {() => <></>}
+      </SuspenseQuery>
+    ).not.toEqualTypeOf<ReactNode>()
+  })
+})

package/src/SuspenseQuery.tsx

@@ -0,0 +1,18 @@
+import type { QueryKey } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { type UseSuspenseQueryOptions, type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
+
+/**
+ * @experimental This is experimental feature.
+ */
+export const SuspenseQuery = <
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>({
+  children,
+  ...options
+}: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  children: (queryResult: UseSuspenseQueryResult<TData, TError>) => ReactNode
+}) => <>{children(useSuspenseQuery(options))}</>

package/src/index.ts

@@ -0,0 +1,13 @@
+export { queryOptions } from './queryOptions'
+export { SuspenseQuery } from './SuspenseQuery'
+export { SuspenseQueries } from './SuspenseQueries'
+export { SuspenseInfiniteQuery } from './SuspenseInfiniteQuery'
+
+export { useSuspenseQuery } from './useSuspenseQuery'
+export type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './useSuspenseQuery'
+export { useSuspenseQueries } from './useSuspenseQueries'
+export type { SuspenseQueriesOptions, SuspenseQueriesResults } from './useSuspenseQueries'
+export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
+export type { UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult } from './useSuspenseInfiniteQuery'
+
+export { QueryErrorBoundary } from './QueryErrorBoundary'

package/src/queryOptions.test-d.tsx

@@ -0,0 +1,119 @@
+import { queryKey } from '@suspensive/test-utils'
+import { type UseQueryResult, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
+import { describe, expectTypeOf, it } from 'vitest'
+import { queryOptions } from './queryOptions'
+import { SuspenseQuery } from './SuspenseQuery'
+import { useSuspenseQueries } from './useSuspenseQueries'
+import { type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
+
+const query = {
+  options1: () =>
+    queryOptions({
+      queryKey: [...queryKey, 1] as const,
+      queryFn: () => Promise.resolve({ field: 'success' }),
+    }),
+  options2: () =>
+    queryOptions({
+      queryKey: [...queryKey, 2] as const,
+      queryFn: () => Promise.resolve({ field: 'success' }),
+    }),
+}
+
+describe('queryOptions', () => {
+  it('should be used with useQuery', () => {
+    const keyFn1Query = useQuery(query.options1())
+    expectTypeOf(keyFn1Query).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+    expectTypeOf(keyFn1Query.data).toEqualTypeOf<{ field: string } | undefined>()
+    const keyFn1Query_Select = useQuery({ ...query.options1(), select: (data) => data.field })
+    expectTypeOf(keyFn1Query_Select).toEqualTypeOf<UseQueryResult<string>>()
+    expectTypeOf(keyFn1Query_Select.data).toEqualTypeOf<string | undefined>()
+  })
+  it('should be used with useSuspenseQuery', () => {
+    const keyFn1SuspenseQuery = useSuspenseQuery(query.options1())
+    expectTypeOf(keyFn1SuspenseQuery).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+    expectTypeOf(keyFn1SuspenseQuery.data).toEqualTypeOf<{ field: string }>()
+    const keyFn1SuspenseQuery_Select = useSuspenseQuery({ ...query.options1(), select: (data) => data.field })
+    expectTypeOf(keyFn1SuspenseQuery_Select).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    expectTypeOf(keyFn1SuspenseQuery_Select.data).toEqualTypeOf<string>()
+  })
+  it('should be used with <SuspenseQuery/>', () => {
+    ;(() => (
+      <SuspenseQuery {...query.options1()}>
+        {(keyFn1SuspenseQuery) => {
+          expectTypeOf(keyFn1SuspenseQuery).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+          expectTypeOf(keyFn1SuspenseQuery.data).toEqualTypeOf<{ field: string }>()
+          return <></>
+        }}
+      </SuspenseQuery>
+    ))()
+    ;(() => (
+      <SuspenseQuery {...query.options1()} select={(data) => data.field}>
+        {(keyFn1SuspenseQuery_Select) => {
+          expectTypeOf(keyFn1SuspenseQuery_Select).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+          expectTypeOf(keyFn1SuspenseQuery_Select.data).toEqualTypeOf<string>()
+          return <></>
+        }}
+      </SuspenseQuery>
+    ))()
+  })
+
+  it('should be used with useQueries', () => {
+    const [query1, query2, query3] = useQueries({
+      queries: [
+        query.options1(),
+        { ...query.options2() },
+        queryOptions({
+          queryKey: [...queryKey, 4] as const,
+          queryFn: () => Promise.resolve({ field: 'success' }),
+          select: (data) => {
+            expectTypeOf(data).toEqualTypeOf<{ field: string }>()
+            return data.field
+          },
+        }),
+      ],
+    })
+    expectTypeOf(query1).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+    expectTypeOf(query1.data).toEqualTypeOf<{ field: string } | undefined>()
+    expectTypeOf(query2).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+    expectTypeOf(query2.data).toEqualTypeOf<{ field: string } | undefined>()
+    expectTypeOf(query3).toEqualTypeOf<UseQueryResult<string>>()
+    expectTypeOf(query3.data).toEqualTypeOf<string | undefined>()
+  })
+  it('should be used with useSuspenseQueries', () => {
+    const [query1, query2, query3] = useSuspenseQueries({
+      queries: [
+        query.options1(),
+        { ...query.options2() },
+        queryOptions({
+          queryKey: [...queryKey, 4] as const,
+          queryFn: () => Promise.resolve({ field: 'success' }),
+          select: (data) => {
+            expectTypeOf(data).toEqualTypeOf<{ field: string }>()
+            return data.field
+          },
+        }),
+      ],
+    })
+
+    expectTypeOf(query1).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+    expectTypeOf(query1.data).toEqualTypeOf<{ field: string }>()
+    expectTypeOf(query2).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+    expectTypeOf(query2.data).toEqualTypeOf<{ field: string }>()
+    expectTypeOf(query3).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    expectTypeOf(query3.data).toEqualTypeOf<string>()
+  })
+
+  it('should be used with useQueryClient', async () => {
+    const queryClient = useQueryClient()
+
+    queryClient.invalidateQueries(query.options1())
+    queryClient.resetQueries(query.options1())
+    queryClient.removeQueries(query.options1())
+    queryClient.cancelQueries(query.options1())
+    queryClient.prefetchQuery(query.options1())
+    queryClient.refetchQueries(query.options1())
+
+    const query1 = await queryClient.fetchQuery(query.options1())
+    expectTypeOf(query1).toEqualTypeOf<{ field: string }>()
+  })
+})

package/src/queryOptions.ts

@@ -0,0 +1,88 @@
+import type { QueryKey, UseQueryOptions } from '@tanstack/react-query'
+import type { OmitKeyof, RequiredKeyof } from './utility-types'
+
+type SelectedQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = RequiredKeyof<
+  OmitKeyof<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    | 'getNextPageParam'
+    | 'getPreviousPageParam'
+    | 'queryKeyHashFn'
+    | '_defaulted'
+    | 'behavior'
+    | 'structuralSharing'
+    | 'isDataEqual'
+    | 'onSuccess'
+    | 'onError'
+    | 'onSettled'
+    | 'enabled'
+    | 'refetchInterval'
+    | 'initialData'
+  >,
+  'queryKey' | 'queryFn'
+> & {
+  select: (data: TQueryFnData) => TData
+}
+
+type UnSelectedQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = RequiredKeyof<
+  OmitKeyof<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    | 'getNextPageParam'
+    | 'getPreviousPageParam'
+    | 'queryKeyHashFn'
+    | '_defaulted'
+    | 'behavior'
+    | 'structuralSharing'
+    | 'isDataEqual'
+    | 'onSuccess'
+    | 'onError'
+    | 'onSettled'
+    | 'enabled'
+    | 'refetchInterval'
+    | 'initialData'
+  >,
+  'queryKey' | 'queryFn'
+> & {
+  select?: undefined
+}
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+): SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+): UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+/**
+ * @experimental This is experimental feature.
+ */
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options:
+    | SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+    | UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+) {
+  return options
+}

package/src/useSuspenseInfiniteQuery.test-d.ts

@@ -0,0 +1,59 @@
+import { queryFn, queryKey } from '@suspensive/test-utils'
+import type { InfiniteData } from '@tanstack/react-query'
+import { type UseSuspenseInfiniteQueryResult, useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
+
+describe('useSuspenseInfiniteQuery', () => {
+  it('type error', () => {
+    // @ts-expect-error no arg
+    useSuspenseInfiniteQuery()
+
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      // @ts-expect-error no suspense
+      suspense: boolean,
+    })
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      // @ts-expect-error no useErrorBoundary
+      useErrorBoundary: boolean,
+    })
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      // @ts-expect-error no enabled
+      enabled: boolean,
+    })
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      // @ts-expect-error no placeholderData
+      placeholderData: 'placeholder',
+    })
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      // @ts-expect-error no isPlaceholderData
+    }).isPlaceholderData
+  })
+
+  it('type check', () => {
+    const infiniteQuery = useSuspenseInfiniteQuery({ queryKey, queryFn })
+    expectTypeOf(infiniteQuery).toEqualTypeOf<UseSuspenseInfiniteQueryResult<{ text: string }>>()
+    expectTypeOf(infiniteQuery.data).toEqualTypeOf<InfiniteData<{ text: string }>>()
+    expectTypeOf(infiniteQuery.status).toEqualTypeOf<'success'>()
+
+    const selectedInfiniteQuery = useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      select: (data) => ({
+        pages: data.pages.map(({ text }) => text),
+        pageParams: data.pageParams,
+      }),
+    })
+    expectTypeOf(selectedInfiniteQuery).toEqualTypeOf<UseSuspenseInfiniteQueryResult<string>>()
+    expectTypeOf(selectedInfiniteQuery.data).toEqualTypeOf<InfiniteData<string>>()
+    expectTypeOf(selectedInfiniteQuery.status).toEqualTypeOf<'success'>()
+  })
+})

package/src/useSuspenseInfiniteQuery.ts

@@ -0,0 +1,47 @@
+import {
+  type InfiniteData,
+  type QueryKey,
+  type UseInfiniteQueryOptions,
+  type UseInfiniteQueryResult,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
+import type { OmitKeyof } from './utility-types'
+
+export interface UseSuspenseInfiniteQueryResult<TData = unknown, TError = unknown>
+  extends OmitKeyof<
+    UseInfiniteQueryResult<TData, TError>,
+    keyof Pick<UseInfiniteQueryResult<TData, TError>, 'isPlaceholderData'>
+  > {
+  data: InfiniteData<TData>
+  status: 'success'
+}
+
+export interface UseSuspenseInfiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends OmitKeyof<
+    UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
+    'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData'
+  > {}
+
+/**
+ * This hook is wrapping useInfiniteQuery of `@tanstack/react-query` v4 with default suspense option.
+ * @see {@link https://suspensive.org/docs/react-query/useSuspenseInfiniteQuery}
+ */
+export function useSuspenseInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+): UseSuspenseInfiniteQueryResult<TData, TError> {
+  return useInfiniteQuery({
+    ...options,
+    enabled: true,
+    suspense: true,
+    useErrorBoundary: true,
+  }) as UseSuspenseInfiniteQueryResult<TData, TError>
+}

package/src/useSuspenseQueries.test-d.ts

@@ -0,0 +1,75 @@
+import { queryFn, queryKey, select } from '@suspensive/test-utils'
+import { describe, expectTypeOf, it } from 'vitest'
+import { queryOptions } from './queryOptions'
+import { useSuspenseQueries } from './useSuspenseQueries'
+import type { UseSuspenseQueryResult } from './useSuspenseQuery'
+
+describe('useSuspenseQueries', () => {
+  it('type error', () => {
+    useSuspenseQueries({
+      queries: [
+        {
+          queryKey: [...queryKey, 1] as const,
+          queryFn,
+          // @ts-expect-error no suspense
+          suspense: false,
+        },
+        {
+          queryKey: [...queryKey, 2] as const,
+          queryFn,
+          select,
+          // @ts-expect-error no suspense
+          suspense: true,
+        },
+        {
+          queryKey: [...queryKey, 3] as const,
+          queryFn,
+          // @ts-expect-error no enabled
+          enabled: true,
+        },
+        {
+          queryKey: [...queryKey, 4] as const,
+          queryFn,
+          // @ts-expect-error no enabled
+          enabled: true,
+          select,
+        },
+        queryOptions({
+          queryKey: [...queryKey, 4] as const,
+          queryFn: () => Promise.resolve({ field: 'success' }),
+          select: (data) => data.field,
+        }),
+      ] as const,
+    })
+    // @ts-expect-error if no items
+    useSuspenseQueries({})
+    // @ts-expect-error if no items
+    useSuspenseQueries()
+  })
+
+  it('type check', () => {
+    const [query, selectedQuery, selectedQueryByQueryOptions] = useSuspenseQueries({
+      queries: [
+        { queryKey: [...queryKey, 5] as const, queryFn },
+        { queryKey: [...queryKey, 6] as const, queryFn, select },
+        queryOptions({
+          queryKey: [...queryKey, 4] as const,
+          queryFn: () => Promise.resolve({ field: 'success' }),
+          select: (data) => data.field,
+        }),
+      ] as const,
+    })
+
+    expectTypeOf(query).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
+    expectTypeOf(query.status).toEqualTypeOf<`success`>()
+    expectTypeOf(query.data).toEqualTypeOf<{ text: string }>()
+
+    expectTypeOf(selectedQuery).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    expectTypeOf(selectedQuery.status).toEqualTypeOf<`success`>()
+    expectTypeOf(selectedQuery.data).toEqualTypeOf<string>()
+
+    expectTypeOf(selectedQueryByQueryOptions).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    expectTypeOf(selectedQueryByQueryOptions.status).toEqualTypeOf<`success`>()
+    expectTypeOf(selectedQueryByQueryOptions.data).toEqualTypeOf<string>()
+  })
+})