@suspensive/react-query-4 2.17.3 → 2.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suspensive/react-query-4",
-  "version": "2.17.3",
+  "version": "2.17.4",
   "description": "Suspensive interfaces for @tanstack/react-query@4",
   "keywords": [
     "suspensive",
@@ -40,15 +40,15 @@
   ],
   "devDependencies": {
     "@tanstack/react-query": "^4.36.1",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.11",
     "react": "^18.3.1",
     "@suspensive/eslint-config": "0.0.0",
-    "@suspensive/react": "2.17.3",
+    "@suspensive/react": "2.17.4",
     "@suspensive/tsconfig": "0.0.0-development",
     "@suspensive/tsup": "0.0.0"
   },
   "peerDependencies": {
-    "@suspensive/react": "^2.17.3",
+    "@suspensive/react": "^2.17.4",
     "@tanstack/react-query": "^4",
     "react": "^18"
   },

package/src/PrefetchInfiniteQuery.tsx

@@ -1,6 +1,14 @@
 import { type FetchInfiniteQueryOptions, type QueryKey } from '@tanstack/react-query'
 import { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'
 
+/**
+ * A component that allows you to use usePrefetchInfiniteQuery in JSX, avoiding the limitations of React hooks.
+ * @see {@link https://suspensive.org/en/docs/react-query/PrefetchInfiniteQuery Suspensive Docs}
+ * @example
+ * ```tsx
+ * <PrefetchInfiniteQuery queryKey={['queryKey']} queryFn={queryFn} />
+ * ```
+ */
 export function PrefetchInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,

package/src/PrefetchQuery.tsx

@@ -1,6 +1,14 @@
 import { type FetchQueryOptions, type QueryKey } from '@tanstack/react-query'
 import { usePrefetchQuery } from './usePrefetchQuery'
 
+/**
+ * A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
+ * @see {@link https://suspensive.org/en/docs/react-query/PrefetchQuery Suspensive Docs}
+ * @example
+ * ```tsx
+ * <PrefetchQuery queryKey={['queryKey']} queryFn={queryFn} />
+ * ```
+ */
 export function PrefetchQuery<
   TQueryFnData = unknown,
   TError = unknown,

package/src/QueryErrorBoundary.tsx

@@ -4,7 +4,15 @@ import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 're
 
 /**
  * This component wrapping QueryErrorResetBoundary of `@tanstack/react-query` with `@suspensive/react`'s ErrorBoundary. So you must install `@suspensive/react` first, then use it. with this component, You don't have to make unnecessary repetitive implementation to combine ErrorBoundary with QueryErrorResetBoundary
- * @see {@link https://suspensive.org/docs/react-query/QueryErrorBoundary}
+ * @see {@link https://suspensive.org/en/docs/react-query/QueryErrorBoundary Suspensive Docs}
+ * @example
+ * ```tsx
+ * <QueryErrorBoundary
+ *   fallback={({ reset, error }) => <></>)}
+ * >
+ *   <ChildrenComponent />
+ * </QueryErrorBoundary>
+ * ```
  */
 export const QueryErrorBoundary = forwardRef<
   ComponentRef<typeof ErrorBoundary>,

package/src/SuspenseInfiniteQuery.tsx

@@ -6,6 +6,22 @@ import {
   useSuspenseInfiniteQuery,
 } from './useSuspenseInfiniteQuery'
 
+/**
+ * We provide these components to clearly express what causes suspense at the same depth.
+ * `<SuspenseInfiniteQuery/>` serves to make `useSuspenseInfiniteQuery` easier to use in jsx.
+ * @see {@link https://suspensive.org/en/docs/react-query/SuspenseInfiniteQuery Suspensive Docs}
+ * @example
+ * ```tsx
+ * import { SuspenseInfiniteQuery } from '@suspensive/react-query'
+ *
+ * // You can use infiniteQueryOptions as props.
+ * <SuspenseInfiniteQuery {...infiniteQueryOptions()}>
+ *   {({ data, fetchNextPage }) => {
+ *     return <></>
+ *   }}
+ * </SuspenseInfiniteQuery>
+ * ```
+ */
 export const SuspenseInfiniteQuery = <
   TQueryFnData = unknown,
   TError = unknown,

package/src/SuspenseQueries.tsx

@@ -1,6 +1,21 @@
 import type { ReactNode } from 'react'
 import { type SuspenseQueriesOptions, type SuspenseQueriesResults, useSuspenseQueries } from './useSuspenseQueries'
 
+/**
+ * We provide these components to clearly express what causes suspense at the same depth.
+ * `<SuspenseQueries/>` serves to make `useSuspenseQueries` easier to use in jsx.
+ * @see {@link https://suspensive.org/en/docs/react-query/SuspenseQueries Suspensive Docs}
+ * @example
+ * ```tsx
+ * import { SuspenseQueries } from '@suspensive/react-query'
+ *
+ * <SuspenseQueries queries={[firstQueryOptions(), secondQueryOptions()]}>
+ *   {([{ data: firstQueryData }, { data: secondQueryData }]) => {
+ *     return <></>
+ *   }}
+ * </SuspenseQueries>
+ * ```
+ */
 export function SuspenseQueries<T extends any[]>({
   children,
   queries,

package/src/SuspenseQuery.tsx

@@ -2,6 +2,22 @@ import type { QueryKey } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import { type UseSuspenseQueryOptions, type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
 
+/**
+ * We provide these components to clearly express what causes suspense at the same depth.
+ * `<SuspenseQuery/>` serves to make `useSuspenseQuery` easier to use in jsx.
+ * @see {@link https://suspensive.org/en/docs/react-query/SuspenseQuery Suspensive Docs}
+ * @example
+ * ```tsx
+ * import { SuspenseQuery } from '@suspensive/react-query'
+ *
+ * // You can use QueryOptions as props.
+ * <SuspenseQuery {...queryOptions()}>
+ *   {({ data, isLoading }) => {
+ *     return <></>
+ *   }
+ * </SuspenseQuery>
+ * ```
+ */
 export const SuspenseQuery = <
   TQueryFnData = unknown,
   TError = unknown,

package/src/infiniteQueryOptions.ts

@@ -59,6 +59,7 @@ export function infiniteQueryOptions<
 >(
   options: SelectedInfiniteOptions<TQueryFnData, TError, TData, TQueryKey>
 ): SelectedInfiniteOptions<TQueryFnData, TError, TData, TQueryKey>
+
 export function infiniteQueryOptions<
   TQueryFnData,
   TError = unknown,
@@ -67,6 +68,7 @@ export function infiniteQueryOptions<
 >(
   options: UnSelectedInfiniteOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UnSelectedInfiniteOptions<TQueryFnData, TError, TData, TQueryKey>
+
 export function infiniteQueryOptions(options: unknown) {
   return options
 }

package/src/queryOptions.ts

@@ -63,6 +63,7 @@ export function queryOptions<
 >(
   options: SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+
 export function queryOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -71,15 +72,7 @@ export function queryOptions<
 >(
   options: UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-export function queryOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options:
-    | SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-    | UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-) {
+
+export function queryOptions(options: unknown) {
   return options
 }

package/src/usePrefetchInfiniteQuery.ts

@@ -1,5 +1,9 @@
 import { type FetchInfiniteQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'
 
+/**
+ * The usePrefetchInfiniteQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseInfiniteQuery.
+ * @see {@link https://suspensive.org/en/docs/react-query/usePrefetchInfiniteQuery Suspensive Docs}
+ */
 export function usePrefetchInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,

package/src/usePrefetchQuery.ts

@@ -1,5 +1,9 @@
 import { type FetchQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'
 
+/**
+ * The usePrefetchQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseQuery.
+ * @see {@link https://suspensive.org/en/docs/react-query/usePrefetchQuery Suspensive Docs}
+ */
 export function usePrefetchQuery<
   TQueryFnData = unknown,
   TError = unknown,

package/src/useSuspenseInfiniteQuery.ts

@@ -28,7 +28,7 @@ export type UseSuspenseInfiniteQueryOptions<
 
 /**
  * This hook is wrapping useInfiniteQuery of `@tanstack/react-query` v4 with default suspense option.
- * @see {@link https://suspensive.org/docs/react-query/useSuspenseInfiniteQuery}
+ * @see {@link https://suspensive.org/en/docs/react-query/useSuspenseInfiniteQuery Suspensive Docs}
  */
 export function useSuspenseInfiniteQuery<
   TQueryFnData = unknown,

package/src/useSuspenseQueries.ts

@@ -111,7 +111,7 @@ export type SuspenseQueriesResults<
 
 /**
  * This hook is wrapping useQueries of `@tanstack/react-query` v4 with default suspense option.
- * @see {@link https://suspensive.org/docs/react-query/useSuspenseQueries}
+ * @see {@link https://suspensive.org/en/docs/react-query/useSuspenseQueries Suspensive Docs}
  */
 export function useSuspenseQueries<T extends any[]>({
   queries,

package/src/useSuspenseQuery.ts

@@ -19,7 +19,7 @@ export type UseSuspenseQueryOptions<
 
 /**
  * This hook is wrapping useQuery of `@tanstack/react-query` v4 with default suspense option.
- * @see {@link https://suspensive.org/docs/react-query/useSuspenseQuery}
+ * @see {@link https://suspensive.org/en/docs/react-query/useSuspenseQuery Suspensive Docs}
  */
 export function useSuspenseQuery<
   TQueryFnData = unknown,

package/dist/chunk-3LTCP5MM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PrefetchInfiniteQuery.tsx"],"sourcesContent":["import { type FetchInfiniteQueryOptions, type QueryKey } from '@tanstack/react-query'\nimport { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'\n\nexport function PrefetchInfiniteQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {\n  usePrefetchInfiniteQuery(options)\n  return <></>\n}\n"],"mappings":";;;;;;AAUS;AAPF,SAAS,sBAKd,SAA4E;AAC5E,2BAAyB,OAAO;AAChC,SAAO,gCAAE;AACX;","names":[]}

package/dist/chunk-A3224DN2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PrefetchQuery.tsx"],"sourcesContent":["import { type FetchQueryOptions, type QueryKey } from '@tanstack/react-query'\nimport { usePrefetchQuery } from './usePrefetchQuery'\n\nexport function PrefetchQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {\n  usePrefetchQuery(options)\n  return <></>\n}\n"],"mappings":";;;;;;AAUS;AAPF,SAAS,cAKd,SAAoE;AACpE,mBAAiB,OAAO;AACxB,SAAO,gCAAE;AACX;","names":[]}

package/dist/chunk-E6ZR4G6A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/usePrefetchQuery.ts"],"sourcesContent":["import { type FetchQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'\n\nexport function usePrefetchQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {\n  const queryClient = useQueryClient()\n\n  if (typeof options.queryKey !== 'undefined' && !queryClient.getQueryState(options.queryKey)) {\n    queryClient.prefetchQuery(options)\n  }\n}\n"],"mappings":";;;AAAA,SAAgD,sBAAsB;AAE/D,SAAS,iBAKd,SAAoE;AACpE,QAAM,cAAc,eAAe;AAEnC,MAAI,OAAO,QAAQ,aAAa,eAAe,CAAC,YAAY,cAAc,QAAQ,QAAQ,GAAG;AAC3F,gBAAY,cAAc,OAAO;AAAA,EACnC;AACF;","names":[]}

package/dist/chunk-HJAGY6R3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/SuspenseQueries.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { type SuspenseQueriesOptions, type SuspenseQueriesResults, useSuspenseQueries } from './useSuspenseQueries'\n\nexport function SuspenseQueries<T extends any[]>({\n  children,\n  queries,\n}: {\n  queries: readonly [...SuspenseQueriesOptions<T>]\n  children: (queries: SuspenseQueriesResults<T>) => ReactNode\n}) {\n  return <>{children(useSuspenseQueries({ queries }))}</>\n}\n"],"mappings":";;;;;;AAUS;AAPF,SAAS,gBAAiC;AAAA,EAC/C;AAAA,EACA;AACF,GAGG;AACD,SAAO,gCAAG,mBAAS,mBAAmB,EAAE,QAAQ,CAAC,CAAC,GAAE;AACtD;","names":[]}

package/dist/chunk-JSOYNYMT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/usePrefetchInfiniteQuery.ts"],"sourcesContent":["import { type FetchInfiniteQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'\n\nexport function usePrefetchInfiniteQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {\n  const queryClient = useQueryClient()\n\n  if (typeof options.queryKey !== 'undefined' && !queryClient.getQueryState(options.queryKey)) {\n    queryClient.prefetchInfiniteQuery(options)\n  }\n}\n"],"mappings":";;;AAAA,SAAwD,sBAAsB;AAEvE,SAAS,yBAKd,SAA4E;AAC5E,QAAM,cAAc,eAAe;AAEnC,MAAI,OAAO,QAAQ,aAAa,eAAe,CAAC,YAAY,cAAc,QAAQ,QAAQ,GAAG;AAC3F,gBAAY,sBAAsB,OAAO;AAAA,EAC3C;AACF;","names":[]}

package/dist/chunk-P5MROV72.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/QueryErrorBoundary.tsx"],"sourcesContent":["import { ErrorBoundary } from '@suspensive/react'\nimport { useQueryErrorResetBoundary } from '@tanstack/react-query'\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 'react'\n\n/**\n * This component wrapping QueryErrorResetBoundary of `@tanstack/react-query` with `@suspensive/react`'s ErrorBoundary. So you must install `@suspensive/react` first, then use it. with this component, You don't have to make unnecessary repetitive implementation to combine ErrorBoundary with QueryErrorResetBoundary\n * @see {@link https://suspensive.org/docs/react-query/QueryErrorBoundary}\n */\nexport const QueryErrorBoundary = forwardRef<\n  ComponentRef<typeof ErrorBoundary>,\n  ComponentPropsWithoutRef<typeof ErrorBoundary>\n>(({ onReset, ...props }, resetRef) => {\n  const { reset } = useQueryErrorResetBoundary()\n  return (\n    <ErrorBoundary\n      {...props}\n      onReset={() => {\n        onReset?.()\n        reset()\n      }}\n      ref={resetRef}\n    />\n  )\n})\nif (process.env.NODE_ENV === 'development') {\n  QueryErrorBoundary.displayName = 'QueryErrorBoundary'\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAC3C,SAA2D,kBAAkB;AAYzE;AANG,IAAM,qBAAqB,WAGhC,CAAC,IAAuB,aAAa;AAApC,eAAE,UAXL,IAWG,IAAc,kBAAd,IAAc,CAAZ;AACH,QAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,SACE;AAAA,IAAC;AAAA,qCACK,QADL;AAAA,MAEC,SAAS,MAAM;AACb;AACA,cAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA;AAAA,EACP;AAEJ,CAAC;AACD,IAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,qBAAmB,cAAc;AACnC;","names":[]}

package/dist/chunk-QZMJUP74.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/SuspenseInfiniteQuery.tsx"],"sourcesContent":["import type { QueryKey } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport {\n  type UseSuspenseInfiniteQueryOptions,\n  type UseSuspenseInfiniteQueryResult,\n  useSuspenseInfiniteQuery,\n} from './useSuspenseInfiniteQuery'\n\nexport const SuspenseInfiniteQuery = <\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>({\n  children,\n  ...options\n}: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n  children: (query: UseSuspenseInfiniteQueryResult<TData, TError>) => ReactNode\n}) => <>{children(useSuspenseInfiniteQuery(options))}</>\n"],"mappings":";;;;;;;;;AAkBM;AAVC,IAAM,wBAAwB,CAKnC,OAKC;AALD,eACA;AAAA;AAAA,EAdF,IAaE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAII,yCAAG,mBAAS,yBAAyB,OAAO,CAAC,GAAE;AAAA;","names":[]}

package/dist/chunk-UX5DVBYP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/SuspenseQuery.tsx"],"sourcesContent":["import type { QueryKey } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { type UseSuspenseQueryOptions, type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'\n\nexport const SuspenseQuery = <\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>({\n  children,\n  ...options\n}: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n  children: (queryResult: UseSuspenseQueryResult<TData, TError>) => ReactNode\n}) => <>{children(useSuspenseQuery(options))}</>\n"],"mappings":";;;;;;;;;AAcM;AAVC,IAAM,gBAAgB,CAK3B,OAKC;AALD,eACA;AAAA;AAAA,EAVF,IASE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAII,yCAAG,mBAAS,iBAAiB,OAAO,CAAC,GAAE;AAAA;","names":[]}