fix(react-query): deprecate QueryErrorBoundary (#1360)

related #1325 ## 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.
toss · Nov 14, 2024 · f7252b4 · f7252b4
1 parent 912937e
commit f7252b4
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 250 deletions.
diff --git a/.changeset/gold-zebras-join.md b/.changeset/gold-zebras-join.md
@@ -0,0 +1,7 @@
+---
+"@suspensive/suspensive.org": patch
+"@suspensive/react-query-4": patch
+"@suspensive/react-query-5": patch
+---
+
+fix(react-query): deprecate QueryErrorBoundary
diff --git a/README.md b/README.md
@@ -24,9 +24,9 @@ Key features: Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay, and more.
 
 ### [@suspensive/react-query](https://suspensive.org/docs/react-query/motivation) [![npm version](https://img.shields.io/npm/v/@suspensive/react-query?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-query) [![npm](https://img.shields.io/npm/dm/@suspensive/react-query?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-query) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/react-query?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-query)
 
-> This package enhances React Query with Suspense support, allowing for simpler and more declarative data fetching. It provides hooks like useSuspenseQuery and useSuspenseInfiniteQuery, which integrate seamlessly with React Suspense. Additionally, it includes QueryErrorBoundary for handling errors during data fetching.
+> This package enhances React Query with Suspense support, allowing for simpler and more declarative data fetching. It provides hooks like useSuspenseQuery and useSuspenseInfiniteQuery, which integrate seamlessly with React Suspense.
 
-Key features: useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery, queryOptions, QueryErrorBoundary, Mutation, and more.
+Key features: useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery, queryOptions, Mutation, and more.
 
 ### [@suspensive/jotai](https://suspensive.org/docs/jotai/motivation) [![npm version](https://img.shields.io/npm/v/@suspensive/jotai?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/jotai) [![npm](https://img.shields.io/npm/dm/@suspensive/jotai?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/jotai) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/jotai?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/jotai)
 

diff --git a/docs/suspensive.org/src/components/BubbleChart.tsx b/docs/suspensive.org/src/components/BubbleChart.tsx
@@ -1,10 +1,10 @@
-import { Suspense } from '@suspensive/react'
+import { ErrorBoundary, Suspense } from '@suspensive/react'
+import { SuspenseQuery, queryOptions } from '@suspensive/react-query-4'
 import {
-  QueryErrorBoundary,
-  SuspenseQuery,
-  queryOptions,
-} from '@suspensive/react-query-4'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+  QueryClient,
+  QueryClientProvider,
+  QueryErrorResetBoundary,
+} from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import * as d3 from 'd3'
 import Link from 'next/link'
@@ -70,92 +70,97 @@ export const BubbleChart = () => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <QueryErrorBoundary
-        fallback={
-          <Link href="https://github.com/toss/suspensive/graphs/contributors">
-            <br />
-            <img
-              src="https://contrib.rocks/image?repo=toss/suspensive"
-              alt="contributors"
-              data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
-              style={{ maxWidth: '100%' }}
-            />
-          </Link>
-        }
-      >
-        <Suspense clientOnly fallback={<></>}>
-          <SuspenseQuery {...contributorsQueryOptions()}>
-            {({ data }) => {
-              const chartData = data
-                ?.filter(
-                  ({ author }) =>
-                    ![
-                      'github-actions[bot]',
-                      'dependabot[bot]',
-                      'renovate[bot]',
-                    ].includes(author.login)
-                )
-                .map(({ author, total }) => ({
-                  name: author.login,
-                  value: total,
-                  avatar: author.avatar_url,
-                  htmlUrl: author.html_url,
-                }))
+      <QueryErrorResetBoundary>
+        {({ reset }) => (
+          <ErrorBoundary
+            onReset={reset}
+            fallback={
+              <Link href="https://github.com/toss/suspensive/graphs/contributors">
+                <br />
+                <img
+                  src="https://contrib.rocks/image?repo=toss/suspensive"
+                  alt="contributors"
+                  data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
+                  style={{ maxWidth: '100%' }}
+                />
+              </Link>
+            }
+          >
+            <Suspense clientOnly fallback={<></>}>
+              <SuspenseQuery {...contributorsQueryOptions()}>
+                {({ data }) => {
+                  const chartData = data
+                    ?.filter(
+                      ({ author }) =>
+                        ![
+                          'github-actions[bot]',
+                          'dependabot[bot]',
+                          'renovate[bot]',
+                        ].includes(author.login)
+                    )
+                    .map(({ author, total }) => ({
+                      name: author.login,
+                      value: total,
+                      avatar: author.avatar_url,
+                      htmlUrl: author.html_url,
+                    }))
 
-              if (chartData) {
-                return (
-                  <>
-                    <div className="flex w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:hidden">
-                      <BubbleChartSize
-                        chartData={chartData}
-                        height={400}
-                        width={400}
-                        padding={2}
-                      />
-                    </div>
-                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:flex md:hidden lg:hidden">
-                      <BubbleChartSize
-                        chartData={chartData}
-                        height={630}
-                        width={630}
-                        padding={6}
-                      />
-                    </div>
-                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:flex lg:hidden">
-                      <BubbleChartSize
-                        chartData={chartData}
-                        height={560}
-                        width={560}
-                        padding={4}
-                      />
-                    </div>
-                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:flex">
-                      <BubbleChartSize
-                        chartData={chartData}
-                        height={760}
-                        width={760}
-                        padding={8}
-                      />
-                    </div>
-                  </>
-                )
-              }
+                  if (chartData) {
+                    return (
+                      <>
+                        <div className="flex w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:hidden">
+                          <BubbleChartSize
+                            chartData={chartData}
+                            height={400}
+                            width={400}
+                            padding={2}
+                          />
+                        </div>
+                        <div className="hidden w-[100%] items-center justify-center overflow-visible sm:flex md:hidden lg:hidden">
+                          <BubbleChartSize
+                            chartData={chartData}
+                            height={630}
+                            width={630}
+                            padding={6}
+                          />
+                        </div>
+                        <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:flex lg:hidden">
+                          <BubbleChartSize
+                            chartData={chartData}
+                            height={560}
+                            width={560}
+                            padding={4}
+                          />
+                        </div>
+                        <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:flex">
+                          <BubbleChartSize
+                            chartData={chartData}
+                            height={760}
+                            width={760}
+                            padding={8}
+                          />
+                        </div>
+                      </>
+                    )
+                  }
 
-              return (
-                <Link href="https://github.com/toss/suspensive/graphs/contributors">
-                  <br />
-                  <img
-                    src="https://contrib.rocks/image?repo=toss/suspensive"
-                    alt="contributors"
-                    data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
-                    style={{ maxWidth: '100%' }}
-                  />
-                </Link>
-              )
-            }}
-          </SuspenseQuery>
-        </Suspense>
-      </QueryErrorBoundary>
+                  return (
+                    <Link href="https://github.com/toss/suspensive/graphs/contributors">
+                      <br />
+                      <img
+                        src="https://contrib.rocks/image?repo=toss/suspensive"
+                        alt="contributors"
+                        data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
+                        style={{ maxWidth: '100%' }}
+                      />
+                    </Link>
+                  )
+                }}
+              </SuspenseQuery>
+            </Suspense>
+          </ErrorBoundary>
+        )}
+      </QueryErrorResetBoundary>
       <ReactQueryDevtools />
     </QueryClientProvider>
   )

diff --git a/docs/suspensive.org/src/pages/en/docs/react-query/QueryErrorBoundary.mdx b/docs/suspensive.org/src/pages/en/docs/react-query/QueryErrorBoundary.mdx
diff --git a/docs/suspensive.org/src/pages/en/docs/react-query/_meta.tsx b/docs/suspensive.org/src/pages/en/docs/react-query/_meta.tsx
@@ -23,5 +23,4 @@ export default {
   PrefetchQuery: { title: '<PrefetchQuery/>' },
   PrefetchInfiniteQuery: { title: '<PrefetchInfiniteQuery/>' },
   QueryClientConsumer: { title: '<QueryClientConsumer/>' },
-  QueryErrorBoundary: { title: '<QueryErrorBoundary/>' },
 }
diff --git a/docs/suspensive.org/src/pages/en/docs/react-query/installation.mdx b/docs/suspensive.org/src/pages/en/docs/react-query/installation.mdx
@@ -50,20 +50,20 @@ Suspensive Libraries are optimized for modern browsers. It is compatible with th
 
 [![npm version](https://img.shields.io/npm/v/@suspensive/react-query?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-query)
 
-@suspensive/react-query is available on npm.  
+@suspensive/react-query is available on npm.
 From version 2.2.0 onwards, it supports both v4 and v5 of @tanstack/react-query. Depending on the version of @tanstack/react-query specified in your package.json dependencies, the appropriate version of @suspensive/react-query will be used automatically.
 
 To use the latest stable version, run the following command.
 
 ```shell npm2yarn
-npm install @suspensive/react-query @tanstack/react-query
+npm install @suspensive/react-query @suspensive/react @tanstack/react-query
 ```
 
-To use @tanstack/react-query v4, run the following command.  
+To use @tanstack/react-query v4, run the following command.
 @tanstack/react-query v4 supports [lower version browsers](/docs/react-query/motivation#solution-for-the-issue-of-tanstackreact-query-v5-not-being-able-to-support-lower-version-browsers-due-to-es-private-field) compared to v5.
 
 ```shell npm2yarn
-npm install @suspensive/react-query @tanstack/react-query@4
+npm install @suspensive/react-query @suspensive/react @tanstack/react-query@4
 ```
 
 <Callout type='info'>

diff --git a/docs/suspensive.org/src/pages/ko/docs/react-query/QueryErrorBoundary.mdx b/docs/suspensive.org/src/pages/ko/docs/react-query/QueryErrorBoundary.mdx
diff --git a/docs/suspensive.org/src/pages/ko/docs/react-query/_meta.tsx b/docs/suspensive.org/src/pages/ko/docs/react-query/_meta.tsx
@@ -21,5 +21,4 @@ export default {
   PrefetchQuery: { title: '<PrefetchQuery/>' },
   PrefetchInfiniteQuery: { title: '<PrefetchInfiniteQuery/>' },
   QueryClientConsumer: { title: '<QueryClientConsumer/>' },
-  QueryErrorBoundary: { title: '<QueryErrorBoundary/>' },
 }