Skip to content

Commit 245ca9b

Browse files
committed
docs: useQueryErrorResetBoundary 오타 제거 및 @suspensive/react-query 타이틀 추가
1 parent a501017 commit 245ca9b

1 file changed

Lines changed: 32 additions & 28 deletions

File tree

README.md

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -743,20 +743,20 @@ const queryClient = useQueryClient();
743743
- initialData 옵션을 통해서 쿼리를 미리 채우는 데 사용할 수 있으며, 초기 로드 상태도 건너뛸 수도 있다.
744744
745745
```tsx
746-
const useSuperHeroData = (heroId: string) => {
747-
const queryClient = useQueryClient();
748-
return useQuery(['super-hero', heroId], fetchSuperHero, {
749-
initialData: () => {
750-
const queryData = queryClient.getQueryData(['super-heroes']) as any;
751-
const hero = queryData?.data?.find(
752-
(hero: Hero) => hero.id === parseInt(heroId)
753-
);
754-
755-
if (hero) return { data: hero };
756-
return undefined;
757-
},
758-
});
759-
};
746+
const useSuperHeroData = (heroId: string) => {
747+
const queryClient = useQueryClient();
748+
return useQuery(["super-hero", heroId], fetchSuperHero, {
749+
initialData: () => {
750+
const queryData = queryClient.getQueryData(["super-heroes"]) as any;
751+
const hero = queryData?.data?.find(
752+
(hero: Hero) => hero.id === parseInt(heroId)
753+
);
754+
755+
if (hero) return { data: hero };
756+
return undefined;
757+
},
758+
});
759+
};
760760
```
761761
762762
<br />
@@ -1178,7 +1178,7 @@ interface Props {
11781178
children: React.ReactNode;
11791179
}
11801180

1181-
const QueryErrorBoundary = ({ children, fallback }: Props) => {
1181+
const QueryErrorBoundary = ({ children }: Props) => {
11821182
const { reset } = useQueryErrorResetBoundary(); // (*)
11831183

11841184
return (
@@ -1228,7 +1228,7 @@ function App() {
12281228
12291229
[목차 이동](#주요-컨셉-및-가이드-목차)
12301230
1231-
- ErrorBoundary는 에러가 발생했을 때 보여주는 Fallback UI를 `선언적`으로 작성할 수 있고, 리액트 쿼리는 Suspense와도 결합해서 `서버 통신 상태가 로딩중`일 때 Fallback UI를 보여줄 수 있게 선언적으로 작성할 수 있다.
1231+
- ErrorBoundary는 에러가 발생했을 때 보여주는 Fallback UI를 `선언적`으로 작성할 수 있고, 리액트 쿼리는 `Suspense`와도 결합해서 `서버 통신 상태가 로딩중`일 때 Fallback UI를 보여줄 수 있게 선언적으로 작성할 수 있다.
12321232
- 참고로, Suspense 컴포넌트는 리액트 v16부터 제공되는 `Component Lazy Loading`이나 `Data Fetching` 등의 비동기 처리를 할 때, 응답을 기다리는 동안 Fallback UI(ex: Loader)를 보여주는 기능을 하는 컴포넌트다.
12331233
12341234
```tsx
@@ -1252,7 +1252,7 @@ function App() {
12521252
}
12531253
```
12541254
1255-
- 코드를 보면 우리는 서버 상태가 로딩일떄 Loader 컴포넌트를 보여주겠다!라고 이해할 수 있다.
1255+
- 코드를 보면 우리는 서버 상태가 로딩일 때 Loader 컴포넌트를 보여주겠다!라고 이해할 수 있다.
12561256
- Suspense컴포넌트 내부에서 어떤 로직이 동작하는지 우리는 신경쓰지 않아도된다. 이처럼 `내부 복잡성을 추상화`하는게 바로 `선언형 컴포넌트`이다.
12571257
- 또한, 위와 같이 react-query와 결합한 Suspense는 아래와 같은 과정으로 동작을한다. 참고해보자.
12581258
@@ -1266,45 +1266,49 @@ function App() {
12661266
7. MainComponent mount
12671267
```
12681268
1269-
- Tanstack React Query 공식문서의 Community Resources에서는 Suspense를 더 타입세이프하게 잘 사용하기 위해 [useSuspenseQuery](https://suspensive.org/ko/docs/react-query/src/useSuspenseQuery.i18n), [useSuspenseQueries](https://suspensive.org/ko/docs/react-query/src/useSuspenseQueries.i18n), [useSuspenseInfiniteQuery](https://suspensive.org/ko/docs/react-query/src/useSuspenseInfiniteQuery.i18n)를 제공하는 [@suspensive/react-query를 소개](https://tanstack.com/query/v4/docs/react/community/suspensive-react-query)하고 있다.
1269+
<br />
1270+
1271+
### 💡 @suspensive/react-query
1272+
1273+
- Tanstack React Query 공식문서의 `Community Resources`에서는 Suspense를 더 `타입 세이프`하게 잘 사용하기 위해 [useSuspenseQuery](https://suspensive.org/ko/docs/react-query/src/useSuspenseQuery.i18n), [useSuspenseQueries](https://suspensive.org/ko/docs/react-query/src/useSuspenseQueries.i18n), [useSuspenseInfiniteQuery](https://suspensive.org/ko/docs/react-query/src/useSuspenseInfiniteQuery.i18n)를 제공하는 [@suspensive/react-query](https://tanstack.com/query/v4/docs/react/community/suspensive-react-query)를 소개하고 있다.
12701274
12711275
### AS IS (@tanstack/react-query)
12721276
12731277
```tsx
1274-
import { useQuery } from '@tanstack/react-query'
1278+
import { useQuery } from "@tanstack/react-query";
12751279

12761280
const Example = () => {
12771281
const query = useQuery({
12781282
queryKey,
12791283
queryFn,
12801284
suspense: true,
1281-
})
1285+
});
12821286

1283-
query.data // TData | undefined
1287+
query.data; // TData | undefined
12841288

12851289
if (query.isSuccess) {
1286-
query.data // TData
1290+
query.data; // TData
12871291
}
1288-
}
1292+
};
12891293
```
12901294
12911295
### TO BE (@suspensive/react-query)
12921296
12931297
```tsx
1294-
import { useSuspenseQuery } from '@suspensive/react-query'
1298+
import { useSuspenseQuery } from "@suspensive/react-query";
12951299

12961300
const Example = () => {
12971301
const query = useSuspenseQuery({
12981302
queryKey,
12991303
queryFn,
1300-
}) // suspense: true가 기본입니다.
1304+
}); // suspense: true가 기본입니다.
13011305

13021306
// isSuccess으로 type narrowing이 필요하지 않습니다.
1303-
query.data // TData
1304-
}
1307+
query.data; // TData
1308+
};
13051309
```
13061310
1307-
> suspensive/react-query의 훅(useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery)은 @tanstack/react-query v5 alpha버전에 추가([관련 Pull Request](https://github.com/TanStack/query/pull/5739))되고 공식 API로 [이 페이지](https://tanstack.com/query/v5/docs/react/guides/suspense)에서 확인할 수 있습니다.
1311+
> suspensive/react-query의 훅(useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery)은 @tanstack/react-query v5 alpha버전에 추가([관련 Pull Request](https://github.com/TanStack/query/pull/5739))되고 공식 API로 [이 페이지](https://tanstack.com/query/v5/docs/react/guides/suspense)에서 확인할 수 있습니다.
13081312
13091313
<br />
13101314

0 commit comments

Comments
 (0)