From cfcafd2b818f72c399149c10154f9b56f2655b9d Mon Sep 17 00:00:00 2001 From: Jonghyeon Ko Date: Sat, 7 Oct 2023 08:57:01 +0900 Subject: [PATCH 1/3] docs(react): update tips as admonitions (#207) * docs(react): update tips as admonitions * docs: update * Create modern-hotels-perform.md * docs: update --- .changeset/modern-hotels-perform.md | 6 ++ .../src/QueryErrorResetBoundary.en.mdx | 80 +++++++++---------- .../src/QueryErrorResetBoundary.ko.mdx | 80 +++++++++---------- .../src/useSuspenseInfiniteQuery.en.mdx | 42 +++++----- .../src/useSuspenseInfiniteQuery.ko.mdx | 42 +++++----- .../react-query/src/useSuspenseQueries.en.mdx | 48 +++++------ .../react-query/src/useSuspenseQueries.ko.mdx | 48 +++++------ .../react-query/src/useSuspenseQuery.en.mdx | 42 +++++----- .../react-query/src/useSuspenseQuery.ko.mdx | 42 +++++----- packages/react/src/ErrorBoundary.en.mdx | 9 ++- packages/react/src/ErrorBoundary.ko.mdx | 10 +-- packages/react/src/Suspense.en.mdx | 14 +++- packages/react/src/Suspense.ko.mdx | 15 ++-- websites/docs/intro/visualization.en.md | 8 +- websites/docs/intro/visualization.ko.md | 12 ++- 15 files changed, 262 insertions(+), 236 deletions(-) create mode 100644 .changeset/modern-hotels-perform.md diff --git a/.changeset/modern-hotels-perform.md b/.changeset/modern-hotels-perform.md new file mode 100644 index 000000000..93774fec5 --- /dev/null +++ b/.changeset/modern-hotels-perform.md @@ -0,0 +1,6 @@ +--- +"@suspensive/react-query": patch +"@suspensive/react": patch +--- + +docs(react): update tips as admonitions diff --git a/packages/react-query/src/QueryErrorResetBoundary.en.mdx b/packages/react-query/src/QueryErrorResetBoundary.en.mdx index 1bfd432de..6e46c4bb5 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.en.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.en.mdx @@ -3,11 +3,48 @@ sidebar_position: 4 title: ', ' --- +@suspensive/react-query provide ``, `` to reduce repeating implementation like using `` + ``, `` + ``. + +You can just use ``, `` like using [``](/docs/react/src/ErrorBoundary.i18n), [``](/docs/react/src/AsyncBoundary.i18n). All other features are same with original ``, `` of @suspensive/react without resetting react-query's error. + +```tsx +import { QueryErrorBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +```tsx +import { QueryAsyncBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +:::note + +### peerDependency + +these apis (``, ``) have peerDependency on @suspensive/react's ``, ``. +So if you want to use these, you must install @suspensive/react first. + +```shell npm2yarn +npm install @suspensive/react @suspensive/react-query +``` + +::: + ### Motivation -With the [QueryErrorResetBoundary](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary) component you can reset any query errors within the boundaries of the component. but If you use react-query with suspense continuously, Continuous repeating to use QueryErrorResetBoundary + [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n), QueryErrorResetBoundary + [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n) will be coded. +With the [``](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary) component you can reset any query errors within the boundaries of the component. but If you use react-query with suspense continuously, Continuous repeating to use `` + [``](/docs/react/src/ErrorBoundary.i18n), `` + [``](/docs/react/src/AsyncBoundary.i18n) will be coded. -#### QueryErrorResetBoundary + ErrorBoundary +#### `` + `` ```tsx import { ErrorBoundary } from '@suspensive/react' @@ -24,7 +61,7 @@ const Example = () => ( ) ``` -#### QueryErrorResetBoundary + AsyncBoundary +#### `` + `` ```tsx import { AsyncBoundary } from '@suspensive/react' @@ -43,40 +80,3 @@ const Example = () => ( ) ``` - -### peerDependency - -Below apis (QueryErrorBoundary, QueryAsyncBoundary) have peerDependency on @suspensive/react's ErrorBoundary, AsyncBoundary. -So if you want to use these, you must install @suspensive/react first. - -```shell npm2yarn -npm install @suspensive/react @suspensive/react-query -``` - -@suspensive/react-query provide QueryErrorBoundary, QueryAsyncBoundary to reduce repeating implementation like using QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary. - -## QueryErrorBoundary - -```tsx -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -## QueryAsyncBoundary - -```tsx -import { QueryAsyncBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -You can just use QueryErrorBoundary / QueryAsyncBoundary like using [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) / [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n). All other features are same with original ErrorBoundary, AsyncBoundary of @suspensive/react without resetting react-query's error. diff --git a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx index a82d41f56..4a0a6a63d 100644 --- a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx +++ b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx @@ -3,11 +3,48 @@ sidebar_position: 4 title: ', ' --- +@suspensive/react-query는 `` + ``, `` + `AsyncBoundary/`와 같은 반복되는 구현을 줄이기 위해 ``, ``를 제공합니다. + +[``](/docs/react/src/ErrorBoundary.i18n), [``](/docs/react/src/AsyncBoundary.i18n)를 사용하는 것처럼 ``, ``를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 ``, ``와 같습니다. + +```tsx +import { QueryErrorBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +```tsx +import { QueryAsyncBoundary } from '@suspensive/react-query' + +const Example = () => ( + }> + + +) +``` + +:::note + +### peerDependency + +이 api(``, ``)는 @suspensive/react의 ``, ``에 peerDependency를 갖습니다. +따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다. + +```shell npm2yarn +npm install @suspensive/react @suspensive/react-query +``` + +::: + ### 동기 -[QueryErrorResetBoundary](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary)를 사용하면 캐싱된 임의의 query error들을 reset할 수 있습니다. 하지만 react-query와 suspense를 계속 사용하면, QueryErrorResetBoundary + [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n), QueryErrorResetBoundary + [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)를 계속 반복적으로 작성해야 합니다. +[``](https://tanstack.com/query/v4/docs/reference/QueryErrorResetBoundary)를 사용하면 캐싱된 임의의 query error들을 reset할 수 있습니다. 하지만 react-query와 suspense를 계속 사용하면, `` + [``](/docs/react/src/ErrorBoundary.i18n), `` + [``](/docs/react/src/AsyncBoundary.i18n)를 계속 반복적으로 작성해야 합니다. -#### QueryErrorResetBoundary + ErrorBoundary +#### `` + `` ```tsx import { ErrorBoundary } from '@suspensive/react' @@ -24,7 +61,7 @@ const Example = () => ( ) ``` -#### QueryErrorResetBoundary + AsyncBoundary +#### `` + `` ```tsx import { AsyncBoundary } from '@suspensive/react' @@ -43,40 +80,3 @@ const Example = () => ( ) ``` - -### peerDependency - -아래 api(QueryErrorBoundary, QueryAsyncBoundary)는 @suspensive/react의 ErrorBoundary, AsyncBoundary에 peerDependency를 갖습니다. -따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다. - -```shell npm2yarn -npm install @suspensive/react @suspensive/react-query -``` - -@suspensive/react-query는 QueryErrorResetBoundary + ErrorBoundary, QueryErrorResetBoundary + AsyncBoundary와 같은 반복되는 구현을 줄이기 위해 QueryErrorBoundary, QueryAsyncBoundary를 제공합니다. - -## QueryErrorBoundary - -```tsx -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -## QueryAsyncBoundary - -```tsx -import { QueryAsyncBoundary } from '@suspensive/react-query' - -const Example = () => ( - }> - - -) -``` - -[ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) / [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)를 사용하는 것처럼 QueryErrorBoundary / QueryAsyncBoundary를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 ErrorBoundary, AsyncBoundary와 같습니다. diff --git a/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx b/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx index 14e7351bc..e6f7be0fa 100644 --- a/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx +++ b/packages/react-query/src/useSuspenseInfiniteQuery.en.mdx @@ -3,9 +3,25 @@ sidebar_position: 3 title: 'useSuspenseInfiniteQuery' --- +Return type of this hook have no isLoading, isError property. because `` and `` 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 useInfiniteQuery of @tanstack/react-query. + +```tsx +import { useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseInfiniteQuery({ + queryKey, + queryFn, + }) // suspense:true is default. + + // No need to do type narrowing by isSuccess + query.data // InfiniteData +} +``` + ### Motivation -If you turn suspense mode on in @tanstack/react-query, You can use useInfiniteQuery with Suspense and ErrorBoundary. +If you turn suspense mode on in @tanstack/react-query, You can use useInfiniteQuery with `` and ``. ```tsx import { useInfiniteQuery } from '@tanstack/react-query' @@ -25,30 +41,14 @@ const Example = () => { } ``` -but useInfiniteQuery's return type:query.data will be always fulfilled because of Suspense as parent of this component. +but useInfiniteQuery's return type:query.data will be always fulfilled because of `` as parent of this component. This is why @suspensive/react-query provide **useSuspenseInfiniteQuery** -## useSuspenseInfiniteQuery - -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 useInfiniteQuery of @tanstack/react-query. - -```tsx -import { useSuspenseInfiniteQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseInfiniteQuery({ - queryKey, - queryFn, - }) // suspense:true is default. - - // No need to do type narrowing by isSuccess - query.data // InfiniteData -} -``` +:::info ### Concentrate on only Success Now, we can concentrate component as any fetching will be always success. + +::: diff --git a/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx b/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx index e69f33acb..d9be4731b 100644 --- a/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx +++ b/packages/react-query/src/useSuspenseInfiniteQuery.ko.mdx @@ -3,9 +3,25 @@ sidebar_position: 3 title: 'useSuspenseInfiniteQuery' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. `` and ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery처럼 사용하면 됩니다. + +```tsx +import { useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseInfiniteQuery({ + queryKey, + queryFn, + }) // suspense 옵션은 true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query.data // InfiniteData +} +``` + ### 동기 -@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 Suspense, ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 ``, ``와 함께 사용할 수 있습니다. ```tsx import { useInfiniteQuery } from '@tanstack/react-query' @@ -25,30 +41,14 @@ const Example = () => { } ``` -하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 Suspense 덕분에 항상 성공한 경우일 것입니다. +하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 `` 덕분에 항상 성공한 경우일 것입니다. 이것이 @suspensive/react-query가 **useSuspenseInfiniteQuery**를 제공하는 이유입니다. -## useSuspenseInfiniteQuery - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense and ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useInfiniteQuery처럼 사용하면 됩니다. - -```tsx -import { useSuspenseInfiniteQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseInfiniteQuery({ - queryKey, - queryFn, - }) // suspense 옵션은 true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query.data // InfiniteData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react-query/src/useSuspenseQueries.en.mdx b/packages/react-query/src/useSuspenseQueries.en.mdx index 948e27d35..81300c759 100644 --- a/packages/react-query/src/useSuspenseQueries.en.mdx +++ b/packages/react-query/src/useSuspenseQueries.en.mdx @@ -3,9 +3,28 @@ sidebar_position: 2 title: 'useSuspenseQueries' --- +There is no isLoading or isError in the return type of this hook. This is because `` and `` guarantee the data of this hook. Also, in the options of this hook, suspense is set to true by default. You can use @tanstack/react-query's useQueries for the new options you need. + +```tsx +import { useSuspenseQueries } from '@suspensive/react-query' + +const Example = () => { + const [query1, query2] = useSuspenseQueries({ + queries: [ + { queryKey: [1], queryFn }, + { queryKey: [2], queryFn }, + ], + }) // suspense: true is the default. + + // No type narrowing required with isSuccess. + query1.data // TData + query2.data // TData +} +``` + ### Motivation -You can use useQueries with Suspense and ErrorBoundary by using the suspense option of @tanstack/react-query useQueries. +You can use useQueries with `` and `` by using the suspense option of @tanstack/react-query useQueries. ```tsx import { useQueries } from '@tanstack/react-query' @@ -30,34 +49,15 @@ const Example = () => { } ``` -The return type of useQueries (query1.data, query2.data) will always be a success case thanks to this component's parents, Suspense and ErrorBoundary. +The return type of useQueries (query1.data, query2.data) will always be a success case thanks to this component's parents, `` and ``. But @tanstack/react-query doesn't express this typologically. That's why @suspensive/react-query provides **useSuspenseQueries**. -## useSuspenseQueries - -There is no isLoading or isError in the return type of this hook. This is because Suspense and ErrorBoundary guarantee the data of this hook. - -Also, in the options of this hook, suspense is set to true by default. You can use @tanstack/react-query's useQueries for the new options you need. - -```tsx -import { useSuspenseQueries } from '@suspensive/react-query' - -const Example = () => { - const [query1, query2] = useSuspenseQueries({ - queries: [ - { queryKey: [1], queryFn }, - { queryKey: [2], queryFn }, - ], - }) // suspense: true is the default. - - // No type narrowing required with isSuccess. - query1.data // TData - query2.data // TData -} -``` +:::info ### Focus on successful cases. Now we can focus only on successful cases as fetching always succeeds inside our component. + +::: diff --git a/packages/react-query/src/useSuspenseQueries.ko.mdx b/packages/react-query/src/useSuspenseQueries.ko.mdx index 3920d088e..bcb6af3d9 100644 --- a/packages/react-query/src/useSuspenseQueries.ko.mdx +++ b/packages/react-query/src/useSuspenseQueries.ko.mdx @@ -3,9 +3,28 @@ sidebar_position: 2 title: 'useSuspenseQueries' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. `` and ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQueries처럼 사용하면 됩니다. + +```tsx +import { useSuspenseQueries } from '@suspensive/react-query' + +const Example = () => { + const [query1, query2] = useSuspenseQueries({ + queries: [ + { queryKey: [1], queryFn }, + { queryKey: [2], queryFn }, + ], + }) // suspense: true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query1.data // TData + query2.data // TData +} +``` + ### 동기 -@tanstack/react-query useQueries의 suspense 옵션을 사용하면, useQueries를 Suspense and ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query useQueries의 suspense 옵션을 사용하면, useQueries를 ``, ``와 함께 사용할 수 있습니다. ```tsx import { useQueries } from '@tanstack/react-query' @@ -30,34 +49,15 @@ const Example = () => { } ``` -useQueries의 return 타입(query1.data, query2.data)은 이 컴포넌트의 부모인 Suspense와 ErrorBoundary 덕분에 항상 성공한 경우일 것입니다. +useQueries의 return 타입(query1.data, query2.data)은 이 컴포넌트의 부모인 ``와 `` 덕분에 항상 성공한 경우일 것입니다. 하지만 @tanstack/react-query는 타입적으로 이것을 표현하지 않습니다. 이것이 @suspensive/react-query가 **useSuspenseQueries**를 제공하는 이유입니다. -## useSuspenseQueries - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense and ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQueries처럼 사용하면 됩니다. - -```tsx -import { useSuspenseQueries } from '@suspensive/react-query' - -const Example = () => { - const [query1, query2] = useSuspenseQueries({ - queries: [ - { queryKey: [1], queryFn }, - { queryKey: [2], queryFn }, - ], - }) // suspense: true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query1.data // TData - query2.data // TData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react-query/src/useSuspenseQuery.en.mdx b/packages/react-query/src/useSuspenseQuery.en.mdx index 51546db78..26a1873a2 100644 --- a/packages/react-query/src/useSuspenseQuery.en.mdx +++ b/packages/react-query/src/useSuspenseQuery.en.mdx @@ -3,9 +3,25 @@ sidebar_position: 1 title: 'useSuspenseQuery' --- +There is no isLoading or isError in the return type of this hook. This is because `` and `` guarantee the data of this hook. Also, in the options of this hook, suspense is set to true by default. Any new options you need can be used like @tanstack/react-query's useQuery. + +```tsx +import { useSuspenseQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseQuery({ + queryKey, + queryFn, + }) // suspense: true is the default. + + // No type narrowing required with isSuccess. + query.data // TData +} +``` + ### motivation -You can use useQuery with Suspense and ErrorBoundary by using the suspense option in @tanstack/react-query. +You can use useQuery with `` and `` by using the suspense option in @tanstack/react-query. ```tsx import { useQuery } from '@tanstack/react-query' @@ -25,31 +41,15 @@ const Example = () => { } ``` -The return type of useQuery (query.data) will always be a success case thanks to this component's parents, Suspense and ErrorBoundary. +The return type of useQuery (query.data) will always be a success case thanks to this component's parents, `` and ``. But @tanstack/react-query doesn't express this typescript typely. That's why @suspensive/react-query provides **useSuspenseQuery**. -## useSuspenseQuery - -There is no isLoading or isError in the return type of this hook. This is because Suspense and ErrorBoundary guarantee the data of this hook. - -Also, in the options of this hook, suspense is set to true by default. Any new options you need can be used like @tanstack/react-query's useQuery. - -```tsx -import { useSuspenseQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseQuery({ - queryKey, - queryFn, - }) // suspense: true is the default. - - // No type narrowing required with isSuccess. - query.data // TData -} -``` +:::info ### Focus on successful cases. Now we can focus only on successful cases as fetching always succeeds inside our component. + +::: diff --git a/packages/react-query/src/useSuspenseQuery.ko.mdx b/packages/react-query/src/useSuspenseQuery.ko.mdx index f8cfc09c5..b1b156be3 100644 --- a/packages/react-query/src/useSuspenseQuery.ko.mdx +++ b/packages/react-query/src/useSuspenseQuery.ko.mdx @@ -3,9 +3,25 @@ sidebar_position: 1 title: 'useSuspenseQuery' --- +이 hook의 return 타입에는 isLoading, isError이 없습니다. ``와 ``가 이 hook의 data를 보장해주기 때문입니다. 또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQuery처럼 사용하면 됩니다. + +```tsx +import { useSuspenseQuery } from '@suspensive/react-query' + +const Example = () => { + const query = useSuspenseQuery({ + queryKey, + queryFn, + }) // suspense: true가 기본입니다. + + // isSuccess으로 type narrowing이 필요하지 않습니다. + query.data // TData +} +``` + ### 동기 -@tanstack/react-query에서 suspense 옵션을 사용하면, useQuery를 Suspense and ErrorBoundary와 함께 사용할 수 있습니다. +@tanstack/react-query에서 suspense 옵션을 사용하면, useQuery를 `` and ``와 함께 사용할 수 있습니다. ```tsx import { useQuery } from '@tanstack/react-query' @@ -25,31 +41,15 @@ const Example = () => { } ``` -useQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 Suspense와 ErrorBoundary 덕분에 항상 성공한 경우일 것입니다. +useQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 ``와 `` 덕분에 항상 성공한 경우일 것입니다. 하지만 @tanstack/react-query는 타입스크립트 타입적으로 이것을 표현하지 않습니다. 이것이 @suspensive/react-query가 **useSuspenseQuery**를 제공하는 이유입니다. -## useSuspenseQuery - -이 hook의 return 타입에는 isLoading, isError이 없습니다. Suspense와 ErrorBoundary가 이 hook의 data를 보장해주기 때문입니다. - -또한, 이 hook의 options에는 기본적으로 suspense가 true입니다. 필요한 새 options는 @tanstack/react-query의 useQuery처럼 사용하면 됩니다. - -```tsx -import { useSuspenseQuery } from '@suspensive/react-query' - -const Example = () => { - const query = useSuspenseQuery({ - queryKey, - queryFn, - }) // suspense: true가 기본입니다. - - // isSuccess으로 type narrowing이 필요하지 않습니다. - query.data // TData -} -``` +:::info ### 성공한 케이스에 집중하세요. 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다. + +::: diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx index f3977d7dc..c0c51e529 100644 --- a/packages/react/src/ErrorBoundary.en.mdx +++ b/packages/react/src/ErrorBoundary.en.mdx @@ -171,9 +171,10 @@ const Example = withErrorBoundary( ) ``` -## Controlling multiple ``s +:::tip -`` is more powerful when used with ``. -Control multiple ``s with ``. +### Controlling multiple ``s -Details are introduced in [`` page](./ErrorBoundaryGroup.i18n). +`` is more powerful when used with ``. Control multiple ``s with ``. Details are introduced in [`` page](./ErrorBoundaryGroup.i18n). + +::: diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx index 78427e6b4..dcc9f00c6 100644 --- a/packages/react/src/ErrorBoundary.ko.mdx +++ b/packages/react/src/ErrorBoundary.ko.mdx @@ -112,7 +112,6 @@ ErrorBoundaryFallback에서 useErrorBoundary.reset을 사용해 props 없이도 ```tsx import { ErrorBoundary, useErrorBoundary } from '@suspensive/react' -import { useState } from 'react' const ErrorBoundaryFallback = () => { const errorBoundary = useErrorBoundary() @@ -172,9 +171,10 @@ const Example = withErrorBoundary( ) ``` -## 다수의 ``를 제어하기 +:::tip -``은 ``과 사용하면 더 강력하게 사용할 수 있습니다. -``로 다수의 ``를 제어하세요. +### 다수의 ``를 제어하기 -자세한 내용은 [``페이지](./ErrorBoundaryGroup.i18n)에서 소개합니다. +``은 ``과 사용하면 더 강력하게 사용할 수 있습니다. ``로 다수의 ``를 제어하세요. 자세한 내용은 [``페이지](./ErrorBoundaryGroup.i18n)에서 소개합니다. + +::: diff --git a/packages/react/src/Suspense.en.mdx b/packages/react/src/Suspense.en.mdx index 38f8e28ca..e1344382e 100644 --- a/packages/react/src/Suspense.en.mdx +++ b/packages/react/src/Suspense.en.mdx @@ -19,12 +19,14 @@ const Example = () => ( ) ``` -#### Default fallback +:::tip + +### Default fallback `` are more powerful when used with ``. -Control multiple ``s default fallback with ``. +Control multiple ``s default fallback with ``. Details are introduced in [`` page](./SuspensiveProvider.i18n). -Details are introduced in [`` page](./SuspensiveProvider.i18n). +::: ### Avoid Server side rendering (CSROnly) @@ -40,10 +42,14 @@ const Example = () => ( ) ``` -#### Migration support SSR gradually (`` -> ``) +:::tip + +### Migration support SSR gradually (`` -> ``) If you want to use Suspense working in both SSR/CSR, You can change `` to `` gradually. +::: + ## withSuspense You can use withSuspense to wrap component by `` easily. diff --git a/packages/react/src/Suspense.ko.mdx b/packages/react/src/Suspense.ko.mdx index b2d0d09fc..f550ca204 100644 --- a/packages/react/src/Suspense.ko.mdx +++ b/packages/react/src/Suspense.ko.mdx @@ -19,12 +19,13 @@ const Example = () => ( ) ``` -#### Default fallback +:::tip -``는 ``와 함께 사용할 때 더욱 강력해집니다. -``를 사용하여 여러 ``의 default fallback를 제어합니다. +### Default fallback -자세한 내용은 [`` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다. +``는 ``와 함께 사용할 때 더욱 강력해집니다. ``를 사용하여 여러 ``의 default fallback를 제어합니다. 자세한 내용은 [`` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다. + +::: ### 서버사이드 렌더링을 피하기 (CSROnly) @@ -40,10 +41,14 @@ const Example = () => ( ) ``` -#### SSR을 지원하도록 점진적으로 마이그레이션하기 (`` -> ``) +:::tip + +### SSR을 지원하도록 점진적으로 마이그레이션하기 (`` -> ``) React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 ``에서 ``로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다. +::: + ## withSuspense withSuspense를 사용하면 컴포넌트를 ``로 쉽게 래핑할 수 있습니다. diff --git a/websites/docs/intro/visualization.en.md b/websites/docs/intro/visualization.en.md index 42d6b2d23..afc7630b8 100644 --- a/websites/docs/intro/visualization.en.md +++ b/websites/docs/intro/visualization.en.md @@ -5,14 +5,18 @@ title: Visualization I made [Concepts Visualization](https://visualization.suspensive.org/react) that whoever can understand core concepts of Suspensive(``, `ErrorBoundary/>`, ``, ``) visually. You can interact this site now. -### First, See how boundaries do +### See how each components work 1. How [``](/docs/react/src/Suspense.i18n) treat loading and success at once in multiple fetching. 2. How [``](/docs/react/src/ErrorBoundary.i18n) treat error at once and how to reset. and what resetKeys do. 3. How [``](/docs/react/src/ErrorBoundaryGroup.i18n) reset multiple ``s without using resetKeys easily. 4. How [``](/docs/react/src/AsyncBoundary.i18n) treat loading, success and error at once. -[**🔗 Click here to see Visualization**](https://visualization.suspensive.org/react) +:::info + +[**Click here to see Visualization**](https://visualization.suspensive.org/react) + +:::