docs(suspensive.org): update tanstack query compatibility doc (#1117)

# Overview - Documentation update for #1100 - Improved the clarity of the "tanstack query compatibility" doc ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>
toss · Jul 22, 2024 · 1de532c · 1de532c
1 parent e550a95
commit 1de532c
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 46 deletions.
diff --git a/docs/suspensive.org/src/pages/docs/react-query/tanstack-query-compatibility.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/tanstack-query-compatibility.en.mdx
@@ -2,19 +2,23 @@ import { Callout } from '@/components'
 
 # Support both TanStack Query v4 and 5
 
-As of version 2.2.0, @suspensive/react-query supports both v4 and v5 of @tanstack/react-query.
+<Callout type='info'>
 
-Internally, it is composed of @suspensive/react-query-4 and @suspensive/react-query-5, corresponding to the respective versions of @tanstack/react-query. It automatically detects the version of @tanstack/react-query installed in the user's environment and provides a compatible interface from @suspensive/react-query.
+From version 2.2.0 onwards, @tanstack/react-query supports both v4 and v5. To support older browser versions, use @tanstack/react-query v4.
+
+</Callout>
+
+@suspensive/react-query internally uses @suspensive/react-query-4 and @suspensive/react-query-5, depending on the version of @tanstack/react-query detected in your environment. It automatically provides a compatible interface.
 
 ## Command-Line Interface (CLI)
 
-The Command-Line Interface (CLI) of @suspensive/react-query is a tool designed to resolve compatibility issues with @tanstack/react-query. Through commands, it verifies compatibility with @tanstack/react-query and switches to a compatible interface of @suspensive/react-query.
+The Command-Line Interface (CLI) of @suspensive/react-query is a tool to handle compatibility issues with @tanstack/react-query. You can use commands to check compatibility and switch to the compatible interface of @suspensive/react-query.
 
-If an error occurs due to incompatibility with @tanstack/react-query for any special reason, the CLI can be used to resolve the issue. However, the actual use of the CLI is rare, as the appropriate interface is automatically used upon installing @suspensive/react-query.
+However, using the CLI is rarely necessary as @suspensive/react-query automatically provides the appropriate interface upon installation.
 
 ## Getting Started
 
-The CLI is included in the @suspensive/react-query package. No additional installation is needed, and it can be used immediately with the following command.
+The CLI is included with the @suspensive/react-query package. No additional installation is required. You can use it directly with the following command.
 
 ```bash
 npx suspensive-react-query
@@ -28,15 +32,15 @@ npx srq
 
 ## Commands
 
-Currently, the CLI provides a total of 5 commands, each described below,
+The CLI currently offers 5 commands. Here are the descriptions of each command.
 
 | Command | Description                                                                    |
 | ------- | ------------------------------------------------------------------------------ |
-| version | Displays the installed version of @suspensive/react-query.                     |
-| help    | Provides usage information for the commands in the console.                    |
-| status  | Checks compatibility with the currently used @tanstack/react-query.            |
-| switch  | Switches to the specified version of the @suspensive/react-query interface.    |
-| fix     | Automatically switches to the interface compatible with @tanstack/react-query. |
+| version | Displays the currently installed version of @suspensive/react-query.           |
+| help    | Shows usage information for the commands.                                      |
+| status  | Checks compatibility with the currently used version of @tanstack/react-query. |
+| switch  | Switches to the specified version of @suspensive/react-query interface.        |
+| fix     | Automatically switches to the compatible interface for @tanstack/react-query.  |
 
 ### version
 
@@ -68,47 +72,66 @@ npx suspensive-react-query --help
 
 ### status
 
-Checks the interface of @suspensive/react-query being used to match @tanstack/react-query and verifies compatibility. It also lists the available APIs based on the version.
+Checks and displays the interface compatibility of @suspensive/react-query with the currently used version of @tanstack/react-query. It also lists the available APIs based on the version.
 
 ```bash
 npx suspensive-react-query status
 ```
 
-For instance, if using @suspensive/react-query@2.4.0 and @tanstack/react-query@5.49.2, you might see,
+For instance, if using @suspensive/react-query@2.9.0 and @tanstack/react-query@5, the result might look like this:
 
 ```
-Suspensive React Query status:
-@suspensive/react-query@2.4.0 exports @suspensive/react-query-5's interfaces
+┌─────────────────────────┬─────────────────────────────────┬────────┬────────────────────────────────────────────────────────┐
+│ @suspensive/react-query │ result                          │ status │ advice                                                 │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ version                 │ 2.9.0                           │ 🟢     │                                                        │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ export                  │ @suspensive/react-query-5@2.9.0 │ 🟢     │                                                        │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ peerDependency          │ @tanstack/react-query@5         │ 🟢     │ The versions are compatible.                           │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ You can use             │ SuspenseQuery                   │ 🟢     │ For more detailed information about the provided APIs, │
+│                         │ SuspenseQueries                 │        │ please visit the official documentation:               │
+│                         │ SuspenseInfiniteQuery           │        │ https://suspensive.org/docs/react-query/motivation     │
+│                         │ Mutation                        │        │                                                        │
+│                         │ QueryErrorBoundary              │        │                                                        │
+└─────────────────────────┴─────────────────────────────────┴────────┴────────────────────────────────────────────────────────┘
+```
+
+### switch
 
-- SuspenseQuery
-- SuspenseQueries
-- SuspenseInfiniteQuery
-- QueryErrorBoundary
+Updating the entry file (dist/index.js) of @suspensive/react-query. This will switch to the specified version of the @suspensive/react-query interface.
 
-@tanstack/react-query@5.49.2
+```typescript
+// dist/index.js of @suspensive/react-query
 
-The versions are compatible.
+// When you use "npx suspensive-react-query switch 4"
+// @suspensive/react-query's dist/index.js
+export * from '@suspensive/react-query-4' // Suspensive interfaces for @tanstack/react-query@4
+// When you use "npx suspensive-react-query switch 5"
+// @suspensive/react-query's dist/index.js
+export * from '@suspensive/react-query-5' // Suspensive interfaces for @tanstack/react-query@5
 ```
 
-### switch
-
-Switches to the @suspensive/react-query interface compatible with @tanstack/react-query. For example, if using @tanstack/react-query v5 and encountering issues, you can switch to a compatible interface with,
+If you are using @tanstack/react-query v5 and encounter errors, you can update the entry file (dist/index.js) and switch to the compatible interface by using the following command:
 
 ```bash
 npx suspensive-react-query switch 5
 ```
 
 ### fix
 
-The `fix` command provides an easy way to match versions. It detects the @tanstack/react-query version in the user's environment and automatically switches to the compatible @suspensive/react-query interface.
+The `fix` command is a convenient way to match the @suspensive/react-query interface with the @tanstack/react-query version in your environment. It detects the installed @tanstack/react-query version and switches to the compatible @suspensive/react-query interface automatically.
 
 ```bash
 npx suspensive-react-query fix
 ```
 
 ## Troubleshooting
 
-If version errors occur during the build, you can specify the version to use in `package.json` as follows. To automatically use the correct version during build, use the script below,
+If you encounter errors related to @suspensive/react-query during build, it is likely due to compatibility issues with the installed @tanstack/react-query version.
+
+You can specify the version in `package.json` to ensure the correct version is used during build. For example, to automatically use the correct version, you can use the following script:
 
 ```json
 {

diff --git a/docs/suspensive.org/src/pages/docs/react-query/tanstack-query-compatibility.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/tanstack-query-compatibility.ko.mdx
@@ -2,15 +2,19 @@ import { Callout } from '@/components'
 
 # TanStack Query v4, 5를 모두 지원
 
-@suspensive/react-query는 v2.2.0 버전 이후로 @tanstack/react-query의 v4와 v5를 모두 지원합니다.
+<Callout type='info'>
 
-내부적으로 @tanstack/react-query 버전에 대응하는 @suspensive/react-query-4와 @suspensive/react-query-5로 구성되어 있습니다. 사용자 환경에 설치된 @tanstack/react-query 버전을 감지하여 자동으로 @suspensive/react-query의 호환되는 인터페이스를 제공합니다.
+@tanstack/react-query@2.2.0 버전 이후로는 @tanstack/react-query v4와 v5을 모두 지원합니다. 더 낮은 버전의 브라우저를 지원하려면 @tanstack/react-query v4를 사용하세요.
+
+</Callout>
+
+@suspensive/react-query는 내부적으로 @tanstack/react-query 버전에 대응하는 @suspensive/react-query-4와 @suspensive/react-query-5로 구성되어 있습니다. 사용자 환경에 설치된 @tanstack/react-query 버전을 감지하여 자동으로 호환되는 인터페이스를 제공합니다.
 
 ## Command-Line Interface (CLI)
 
 @suspensive/react-query의 Command-Line Interface (CLI)는 @tanstack/react-query와의 호환성 문제를 해결하기 위한 도구입니다. 명령어를 통해 @tanstack/react-query와의 호환 여부를 확인하고, @suspensive/react-query의 호환되는 인터페이스로 전환할 수 있습니다.
 
-특수한 이유로 @tanstack/react-query와 호환되지 않아 에러가 발생하면, CLI를 통해 문제를 해결할 수 있습니다. 하지만 실제로 CLI를 사용할 일은 드물며, @suspensive/react-query 설치 시 자동으로 알맞은 인터페이스를 사용합니다.
+하지만 실제로 CLI를 사용할 일은 드물며, @suspensive/react-query 설치 시 자동으로 호환되는 인터페이스를 제공합니다.
 
 ## 시작하기
 
@@ -68,48 +72,68 @@ npx suspensive-react-query --help
 
 ### status
 
-현재 사용 중인 @tanstack/react-query와 대응되고 있는 @suspensive/react-query의 인터페이스를 확인하고, 호환성 여부를 확인할 수 있습니다. 또한 버전에 따라 사용 가능한 API를 확인할 수 있습니다.
+현재 사용 중인 @tanstack/react-query와 호환되는 @suspensive/react-query의 인터페이스를 확인하고, 호환성 여부를 확인할 수 있습니다. 또한 버전에 따라 제공되는 API를 확인할 수 있습니다.
 
 ```bash
 npx suspensive-react-query status
 ```
 
-예를 들어, @suspensive/react-query@2.4.0 버전과 @tanstack/react-query@5.49.2 버전을 사용 중인 경우, 다음과 같은 결과를 확인할 수 있습니다.
+예를 들어, @suspensive/react-query@2.9.0 버전과 @tanstack/react-query@5 버전을 사용 중인 경우, 다음과 같은 결과를 확인할 수 있습니다.
+
+status로 호환 상태를 확인할 수 있으며, You can use 항목에서 현재 환경에서 사용할 수 있는 인터페이스를 확인할 수 있습니다.
 
 ```
-Suspensive React Query status:
-@suspensive/react-query@2.4.0 exports @suspensive/react-query-5's interfaces
+┌─────────────────────────┬─────────────────────────────────┬────────┬────────────────────────────────────────────────────────┐
+│ @suspensive/react-query │ result                          │ status │ advice                                                 │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ version                 │ 2.9.0                           │ 🟢     │                                                        │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ export                  │ @suspensive/react-query-5@2.9.0 │ 🟢     │                                                        │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ peerDependency          │ @tanstack/react-query@5         │ 🟢     │ The versions are compatible.                           │
+├─────────────────────────┼─────────────────────────────────┼────────┼────────────────────────────────────────────────────────┤
+│ You can use             │ SuspenseQuery                   │ 🟢     │ For more detailed information about the provided APIs, │
+│                         │ SuspenseQueries                 │        │ please visit the official documentation:               │
+│                         │ SuspenseInfiniteQuery           │        │ https://suspensive.org/docs/react-query/motivation     │
+│                         │ Mutation                        │        │                                                        │
+│                         │ QueryErrorBoundary              │        │                                                        │
+└─────────────────────────┴─────────────────────────────────┴────────┴────────────────────────────────────────────────────────┘
+```
 
-- SuspenseQuery
-- SuspenseQueries
-- SuspenseInfiniteQuery
-- QueryErrorBoundary
+### switch
 
-@tanstack/react-query@5.49.2
+@suspensive/react-query의 엔트리 파일(dist/index.js)을 업데이트합니다. 이는 지정한 버전의 @suspensive/react-query 인터페이스로 전환됩니다.
 
-The versions are compatible.
-```
+```typescript
+// dist/index.js of @suspensive/react-query
 
-### switch
+// "npx suspensive-react-query switch 4"를 사용할 때
+// @suspensive/react-query의 dist/index.js
+export * from '@suspensive/react-query-4' // @tanstack/react-query@4용 Suspensive 인터페이스
+// "npx suspensive-react-query switch 5"를 사용할 때
+// @suspensive/react-query의 dist/index.js
+export * from '@suspensive/react-query-5' // @tanstack/react-query@5용 Suspensive 인터페이스
+```
 
-@tanstack/react-query에 대응하고 있는 @suspensive/react-query 인터페이스로 변경할 수 있습니다. 예를 들어, @tanstack/react-query v5를 사용하고 있는데 오류가 발생하면, 다음 명령어를 사용하여 호환되는 인터페이스로 변경할 수 있습니다.
+@tanstack/react-query v5를 사용하고 있는데 오류가 발생하면, 다음 명령어를 사용하여 엔트리 파일(dist/index.js)을 업데이트하여 호환되는 인터페이스로 전환할 수 있습니다.
 
 ```bash
 npx suspensive-react-query switch 5
 ```
 
 ### fix
 
-`fix` 명령어는 손쉽게 버전을 맞추는 간편한 방법입니다. 사용자 환경에서 @tanstack/react-query 버전을 감지하여, 호환되는 @suspensive/react-query의 인터페이스를 자동으로 변경합니다.
+`fix` 명령어는 @suspensive/react-query와 @tanstack/react-query이 호환되지 않는 환경에서 손쉽게 버전을 맞추는 간편한 방법입니다. 사용자 환경의 @tanstack/react-query 버전을 감지하여, 호환되는 @suspensive/react-query의 인터페이스로 자동으로 전환합니다.
 
 ```bash
 npx suspensive-react-query fix
 ```
 
 ## 문제 해결
 
-빌드 도중 버전에 대한 오류가 발생하면, 다음과 같은 방법으로 `package.json`에 사용하고자 하는 버전을 지정할 수 있습니다.
-빌드 시 자동으로 올바른 버전을 사용하게 하려면 다음과 같이 스크립트를 사용할 수 있습니다.
+빌드 중 @suspensive/react-query에 대한 오류가 발생하면, 대부분 설치된 @tanstack/react-query와의 호환성 문제로 발생되는 것입니다.
+
+다음과 같은 방법으로 `package.json`에 사용하고자 하는 버전을 지정할 수 있습니다. 빌드 시 자동으로 올바른 버전을 사용하게 하려면 다음과 같이 스크립트를 사용할 수 있습니다.
 
 ```json
 {
@@ -119,7 +143,7 @@ npx suspensive-react-query fix
 }
 ```
 
-또는 버전을 고정하려면 다음과 같이 설정할 수 있습니다.
+또는 @suspensive/react-query의 버전을 고정하려면 다음과 같이 설정할 수 있습니다.
 
 ```json
 {