docs(react): update tips as admonitions (#207)

* docs(react): update tips as admonitions * docs: update * Create modern-hotels-perform.md * docs: update
toss · Oct 6, 2023 · cfcafd2 · cfcafd2 · vercel · Oct 6, 2023
1 parent cbfbc02
commit cfcafd2
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 236 deletions.
diff --git a/.changeset/modern-hotels-perform.md 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
@@ -3,11 +3,48 @@ sidebar_position: 4
 title: '<QueryErrorBoundary/>, <QueryAsyncBoundary/>'
 ---
 
+@suspensive/react-query provide `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>` to reduce repeating implementation like using `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`, `<QueryErrorResetBoundary/>` + `<AsyncBoundary/>`.
+
+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.
+
+```tsx
+import { QueryErrorBoundary } from '@suspensive/react-query'
+
+const Example = () => (
+  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+    <Page />
+  </QueryErrorBoundary>
+)
+```
+
+```tsx
+import { QueryAsyncBoundary } from '@suspensive/react-query'
+
+const Example = () => (
+  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+    <Page />
+  </QueryAsyncBoundary>
+)
+```
+
+:::note
+
+### peerDependency
+
+these 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
+```
+
+:::
+
 ### 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 [`<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.
 
-#### QueryErrorResetBoundary + ErrorBoundary
+#### `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`
 
 ```tsx
 import { ErrorBoundary } from '@suspensive/react'
@@ -24,7 +61,7 @@ const Example = () => (
 )
 ```
 
-#### QueryErrorResetBoundary + AsyncBoundary
+#### `<QueryErrorResetBoundary/>` + `<AsyncBoundary/>`
 
 ```tsx
 import { AsyncBoundary } from '@suspensive/react'
@@ -43,40 +80,3 @@ const Example = () => (
   </QueryErrorResetBoundary>
 )
 ```
-
-### 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 = () => (
-  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
-    <Page />
-  </QueryErrorBoundary>
-)
-```
-
-## QueryAsyncBoundary
-
-```tsx
-import { QueryAsyncBoundary } from '@suspensive/react-query'
-
-const Example = () => (
-  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
-    <Page />
-  </QueryAsyncBoundary>
-)
-```
-
-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
@@ -3,11 +3,48 @@ sidebar_position: 4
 title: '<QueryErrorBoundary/>, <QueryAsyncBoundary/>'
 ---
 
+@suspensive/react-query는 `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`, `<QueryErrorResetBoundary/>` + `AsyncBoundary/`와 같은 반복되는 구현을 줄이기 위해 `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>`를 제공합니다.
+
+[`<ErrorBoundary/>`](/docs/react/src/ErrorBoundary.i18n), [`<AsyncBoundary/>`](/docs/react/src/AsyncBoundary.i18n)를 사용하는 것처럼 `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>`를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 `<ErrorBoundary/>`, `<AsyncBoundary/>`와 같습니다.
+
+```tsx
+import { QueryErrorBoundary } from '@suspensive/react-query'
+
+const Example = () => (
+  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+    <Page />
+  </QueryErrorBoundary>
+)
+```
+
+```tsx
+import { QueryAsyncBoundary } from '@suspensive/react-query'
+
+const Example = () => (
+  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+    <Page />
+  </QueryAsyncBoundary>
+)
+```
+
+:::note
+
+### peerDependency
+
+이 api(`<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>`)는 @suspensive/react의 `<ErrorBoundary/>`, `<AsyncBoundary/>`에 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)를 계속 반복적으로 작성해야 합니다.
+[`<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)를 계속 반복적으로 작성해야 합니다.
 
-#### QueryErrorResetBoundary + ErrorBoundary
+#### `<QueryErrorResetBoundary/>` + `<ErrorBoundary/>`
 
 ```tsx
 import { ErrorBoundary } from '@suspensive/react'
@@ -24,7 +61,7 @@ const Example = () => (
 )
 ```
 
-#### QueryErrorResetBoundary + AsyncBoundary
+#### `<QueryErrorResetBoundary/>` + `<AsyncBoundary/>`
 
 ```tsx
 import { AsyncBoundary } from '@suspensive/react'
@@ -43,40 +80,3 @@ const Example = () => (
   </QueryErrorResetBoundary>
 )
 ```
-
-### 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 = () => (
-  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
-    <Page />
-  </QueryErrorBoundary>
-)
-```
-
-## QueryAsyncBoundary
-
-```tsx
-import { QueryAsyncBoundary } from '@suspensive/react-query'
-
-const Example = () => (
-  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
-    <Page />
-  </QueryAsyncBoundary>
-)
-```
-
-[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
@@ -3,9 +3,25 @@ sidebar_position: 3
 title: '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<TData>
+}
+```
+
 ### 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 `<Suspense/>` and `<ErrorBoundary/>`.
 
 ```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 `<Suspense/>` 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<TData>
-}
-```
+:::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
@@ -3,9 +3,25 @@ sidebar_position: 3
 title: '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<TData>
+}
+```
+
 ### 동기
 
-@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 Suspense, ErrorBoundary와 함께 사용할 수 있습니다.
+@tanstack/react-query에서 suspense 옵션을 사용하면, useInfiniteQuery를 `<Suspense/>`, `<ErrorBoundary/>`와 함께 사용할 수 있습니다.
 
 ```tsx
 import { useInfiniteQuery } from '@tanstack/react-query'
@@ -25,30 +41,14 @@ const Example = () => {
 }
 ```
 
-하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 Suspense 덕분에 항상 성공한 경우일 것입니다.
+하지만 useInfiniteQuery의 return 타입(query.data)은 이 컴포넌트의 부모인 `<Suspense/>` 덕분에 항상 성공한 경우일 것입니다.
 
 이것이 @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<TData>
-}
-```
+:::info
 
 ### 성공한 케이스에 집중하세요.
 
 이제 우리는 컴포넌트 내부에서 fetching이 항상 성공하므로 성공한 경우에만 집중할 수 있습니다.
+
+:::