diff --git a/docs/config.json b/docs/config.json index dd25aabba7..d6402c58db 100644 --- a/docs/config.json +++ b/docs/config.json @@ -204,6 +204,10 @@ { "label": "Angular Query", "to": "react/community/angular-query" + }, + { + "label": "Suspensive React Query", + "to": "react/community/suspensive-react-query" } ] }, diff --git a/docs/react/community/suspensive-react-query.md b/docs/react/community/suspensive-react-query.md new file mode 100644 index 0000000000..07e9730e64 --- /dev/null +++ b/docs/react/community/suspensive-react-query.md @@ -0,0 +1,69 @@ +--- +id: suspensive-react-query +title: Suspensive React Query +--- + +Typesafe useQuery, useInfiniteQuery with default suspense option. + +Use @suspensive/react-query, delegate loading and error handling to the outside of the component with useSuspenseQuery and useSuspenseInfiniteQuery, and focus on success inside the component. + +You don't even need to use the isSuccess flag. + +## Installation +You can install @suspensive/react-query via [NPM](https://www.npmjs.com/package/@suspensive/react-query). + +```bash +$ npm i @suspensive/react @suspensive/react-query +# or +$ pnpm add @suspensive/react @suspensive/react-query +# or +$ yarn add @suspensive/react @suspensive/react-query +``` + +### Motivation + +If you turn suspense mode on in @tanstack/react-query, You can use useQuery with Suspense and ErrorBoundary. + +```tsx +import { useQuery } from '@tanstack/react-query' + +const Example = () => { + const query = useQuery(queryKey, queryFn, { + suspense: true, + }) + + query.data // TData | undefined + + if (query.isSuccess) { + query.data // TData + } +} +``` + +Typically query.data will be `TData | undefined` like this code example. +But actual useQuery's return type:query.data will be always fulfilled because of [Suspense](https://suspensive.org/docs/react/src/Suspense.i18n) and [ErrorBoundary](https://suspensive.org/docs/react/src/ErrorBoundary.i18n) as parent of this component. + +This is why @suspensive/react-query provide **useSuspenseQuery** + +## useSuspenseQuery + +Return type of this hook have no isLoading, isError property. because Suspense and ErrorBoundary will guarantee this hook's data. + +In addition, this hook's options have default suspense: true. and you can provide new options to this hook like useQuery of @tanstack/react-query. + +```tsx +import { useSuspenseQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseQuery(queryKey, queryFn, options) // suspense:true is default. + + // No need to do type narrowing by isSuccess + query.data // TData +} +``` + +### Concentrate on only Success + +Now, we can concentrate component as any fetching will be always success in component. + +Check the complete documentation on [GitHub](https://github.com/suspensive/react).