diff --git a/.changeset/gold-zebras-join.md b/.changeset/gold-zebras-join.md new file mode 100644 index 000000000..5b500cac2 --- /dev/null +++ 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 index 376c71dee..1be876490 100644 --- 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 index 8fefc61cc..9ba95763e 100644 --- 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 ( - -
- contributors - - } - > - }> - - {({ 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, - })) + + {({ reset }) => ( + +
+ contributors + + } + > + }> + + {({ 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 ( - <> -
- -
-
- -
-
- -
-
- -
- - ) - } + if (chartData) { + return ( + <> +
+ +
+
+ +
+
+ +
+
+ +
+ + ) + } - return ( - -
- contributors - - ) - }} - - - + return ( + +
+ contributors + + ) + }} + + + + )} + ) 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 deleted file mode 100644 index 0298c0b9f..000000000 --- a/docs/suspensive.org/src/pages/en/docs/react-query/QueryErrorBoundary.mdx +++ /dev/null @@ -1,66 +0,0 @@ -import { Callout } from '@/components' - -# QueryErrorBoundary - -@suspensive/react-query provide `` to reduce repeating implementation like using `` + ``. - -You can just use `` like using [``](/docs/react/ErrorBoundary). All other features are same with original `` of @suspensive/react without resetting react-query's error. - -```tsx /QueryErrorBoundary/ -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - ( - <> - - {props.error.message} - - )} - > - - -) -``` - - - -peerDependency - -`` 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 [``](https://tanstack.com/query/v4/docs/framework/react/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/ErrorBoundary) will be coded. - -#### `` + `` - -```tsx /QueryErrorResetBoundary/ /ErrorBoundary/ -import { ErrorBoundary } from '@suspensive/react' -import { QueryErrorResetBoundary } from '@tanstack/react-query' - -const Example = () => ( - - {({ reset }) => ( - ( - <> - - {props.error.message} - - )} - > - - - )} - -) -``` 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 index 1ae8aabac..50cd9c591 100644 --- 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: '' }, PrefetchInfiniteQuery: { title: '' }, QueryClientConsumer: { title: '' }, - QueryErrorBoundary: { title: '' }, } 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 index 32bfc1893..b2428fc8c 100644 --- 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 ``` 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 deleted file mode 100644 index 8d831f25d..000000000 --- a/docs/suspensive.org/src/pages/ko/docs/react-query/QueryErrorBoundary.mdx +++ /dev/null @@ -1,66 +0,0 @@ -import { Callout } from '@/components' - -# QueryErrorBoundary - -@suspensive/react-query는 `` + ``와 같은 반복되는 구현을 줄이기 위해 ``를 제공합니다. - -[``](/docs/react/ErrorBoundary)를 사용하는 것처럼 ``를 사용할 수 있습니다. react-query의 캐싱된 error를 reset한다는 점만 빼면 모든 다른 기능은 @suspensive/react의 ``와 같습니다. - -```tsx /QueryErrorBoundary/ -import { QueryErrorBoundary } from '@suspensive/react-query' - -const Example = () => ( - ( - <> - - {props.error.message} - - )} - > - - -) -``` - - - -peerDependency - -``는 @suspensive/react의 ``에 peerDependency를 갖습니다. -따라서 이를 사용하려면 먼저 @suspensive/react를 설치해야 합니다. - -```shell npm2yarn -npm install @suspensive/react @suspensive/react-query -``` - - - -### 동기 - -[``](https://tanstack.com/query/v4/docs/framework/react/reference/QueryErrorResetBoundary)를 사용하면 캐싱된 임의의 query error들을 reset할 수 있습니다. 하지만 react-query와 suspense를 계속 사용하면, `` + [``](/docs/react/ErrorBoundary)를 계속 반복적으로 작성해야 합니다. - -#### `` + `` - -```tsx /QueryErrorResetBoundary/ /ErrorBoundary/ -import { ErrorBoundary } from '@suspensive/react' -import { QueryErrorResetBoundary } from '@tanstack/react-query' - -const Example = () => ( - - {({ reset }) => ( - ( - <> - - {props.error.message} - - )} - > - - - )} - -) -``` 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 index 255ad017e..119a2c842 100644 --- 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: '' }, PrefetchInfiniteQuery: { title: '' }, QueryClientConsumer: { title: '' }, - QueryErrorBoundary: { title: '' }, } diff --git a/docs/suspensive.org/src/pages/ko/docs/react-query/installation.mdx b/docs/suspensive.org/src/pages/ko/docs/react-query/installation.mdx index 75ed93cea..787f1f301 100644 --- a/docs/suspensive.org/src/pages/ko/docs/react-query/installation.mdx +++ b/docs/suspensive.org/src/pages/ko/docs/react-query/installation.mdx @@ -50,20 +50,20 @@ Suspensive 라이브러리는 모던 브라우저를 위해 최적화되었습 [![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는 npm에 있습니다. +@suspensive/react-query는 npm에 있습니다. 2.2.0 버전 이후로는 @tanstack/react-query의 v4와 v5을 모두 지원합니다. package.json의 dependencies에 @tanstack/react-query의 버전에 따라 자동으로 알맞는 @suspensive/react-query 버전을 사용하게 됩니다. 최신 안정버전을 사용하고자 하면 아래 커맨드를 실행하세요. ```shell npm2yarn -npm install @suspensive/react-query @tanstack/react-query +npm install @suspensive/react-query @suspensive/react @tanstack/react-query ``` -@tanstack/react-query v4를 사용하고자 하면 아래 커맨드를 실행하세요. +@tanstack/react-query v4를 사용하고자 하면 아래 커맨드를 실행하세요. @tanstack/react-query v4는 @tanstack/react-query v5 보다 [더 낮은 버전의 브라우저를 지원](/ko/docs/react-query/motivation#tanstackreact-query-v5의-es-private-field로-인해-저버전의-브라우저를-지원하지-못하는-문제를-해결합니다)합니다. ```shell npm2yarn -npm install @suspensive/react-query @tanstack/react-query@4 +npm install @suspensive/react-query @suspensive/react @tanstack/react-query@4 ``` diff --git a/examples/visualization/src/app/react-query/page.tsx b/examples/visualization/src/app/react-query/page.tsx index dd8d1b994..411fd677d 100644 --- a/examples/visualization/src/app/react-query/page.tsx +++ b/examples/visualization/src/app/react-query/page.tsx @@ -1,7 +1,7 @@ 'use client' import { ErrorBoundary, ErrorBoundaryGroup, Suspense, wrap } from '@suspensive/react' -import { QueryErrorBoundary, SuspenseQuery, queryOptions } from '@suspensive/react-query' +import { SuspenseQuery, queryOptions } from '@suspensive/react-query' import { useQueryErrorResetBoundary } from '@tanstack/react-query' import { Area, Box, Button, RejectedFallback, Spinner } from '~/components/uis' import { api } from '~/utils/api' @@ -32,19 +32,6 @@ export default wrap.ErrorBoundaryGroup({}).on(function Page() { - - - - }> - - {({ data }) => {data}} - - - {({ data }) => {data}} - - - - ) }) diff --git a/packages/react-query-4/src/QueryErrorBoundary.tsx b/packages/react-query-4/src/QueryErrorBoundary.tsx index 7de5523c1..5f27ea568 100644 --- a/packages/react-query-4/src/QueryErrorBoundary.tsx +++ b/packages/react-query-4/src/QueryErrorBoundary.tsx @@ -4,7 +4,7 @@ import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 're /** * This component wrapping QueryErrorResetBoundary of `@tanstack/react-query` with `@suspensive/react`'s ErrorBoundary. So you must install `@suspensive/react` first, then use it. with this component, You don't have to make unnecessary repetitive implementation to combine ErrorBoundary with QueryErrorResetBoundary - * @see {@link https://suspensive.org/en/docs/react-query/QueryErrorBoundary Suspensive Docs} + * @deprecated this interface will be removed in the next major version. Please make this component yourself by combining ErrorBoundary of `@suspensive/react` and useQueryErrorResetBoundary of `@tanstack/react-query` * @example * ```tsx *