@kood/claude-code 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +6 -2
- package/package.json +1 -1
- package/templates/.claude/agents/document-writer.md +2 -2
- package/templates/.claude/skills/docs-creator/SKILL.md +2 -2
- package/templates/.claude/skills/docs-refactor/SKILL.md +1 -1
- package/templates/.claude/skills/plan/SKILL.md +15 -15
- package/templates/hono/CLAUDE.md +28 -28
- package/templates/hono/docs/architecture.md +24 -24
- package/templates/hono/docs/deployment/cloudflare.md +18 -18
- package/templates/hono/docs/deployment/docker.md +13 -13
- package/templates/hono/docs/deployment/index.md +19 -19
- package/templates/hono/docs/deployment/railway.md +32 -32
- package/templates/hono/docs/deployment/vercel.md +29 -29
- package/templates/hono/docs/guides/conventions.md +57 -57
- package/templates/hono/docs/guides/env-setup.md +47 -47
- package/templates/hono/docs/guides/getting-started.md +27 -27
- package/templates/hono/docs/library/hono/error-handling.md +11 -11
- package/templates/hono/docs/library/hono/index.md +4 -4
- package/templates/hono/docs/library/hono/middleware.md +18 -18
- package/templates/hono/docs/library/hono/rpc.md +7 -7
- package/templates/hono/docs/library/hono/validation.md +6 -6
- package/templates/hono/docs/library/prisma/cloudflare-d1.md +29 -29
- package/templates/hono/docs/library/prisma/config.md +16 -16
- package/templates/hono/docs/library/prisma/index.md +32 -32
- package/templates/hono/docs/library/t3-env/index.md +22 -22
- package/templates/hono/docs/library/zod/index.md +31 -31
- package/templates/nextjs/CLAUDE.md +54 -54
- package/templates/nextjs/docs/architecture.md +146 -146
- package/templates/nextjs/docs/design.md +183 -183
- package/templates/nextjs/docs/guides/conventions.md +86 -86
- package/templates/nextjs/docs/guides/getting-started.md +28 -28
- package/templates/nextjs/docs/guides/routes.md +32 -32
- package/templates/nextjs/docs/library/better-auth/index.md +70 -70
- package/templates/nextjs/docs/library/nextjs/app-router.md +43 -43
- package/templates/nextjs/docs/library/nextjs/caching.md +73 -73
- package/templates/nextjs/docs/library/nextjs/index.md +51 -51
- package/templates/nextjs/docs/library/nextjs/middleware.md +41 -41
- package/templates/nextjs/docs/library/nextjs/route-handlers.md +31 -31
- package/templates/nextjs/docs/library/nextjs/server-actions.md +34 -34
- package/templates/nextjs/docs/library/prisma/cloudflare-d1.md +20 -20
- package/templates/nextjs/docs/library/prisma/config.md +18 -18
- package/templates/nextjs/docs/library/prisma/crud.md +17 -17
- package/templates/nextjs/docs/library/prisma/index.md +18 -18
- package/templates/nextjs/docs/library/prisma/relations.md +16 -16
- package/templates/nextjs/docs/library/prisma/schema.md +23 -23
- package/templates/nextjs/docs/library/prisma/setup.md +6 -6
- package/templates/nextjs/docs/library/prisma/transactions.md +10 -10
- package/templates/nextjs/docs/library/tanstack-query/index.md +6 -6
- package/templates/nextjs/docs/library/tanstack-query/invalidation.md +20 -20
- package/templates/nextjs/docs/library/tanstack-query/optimistic-updates.md +4 -4
- package/templates/nextjs/docs/library/tanstack-query/use-mutation.md +15 -15
- package/templates/nextjs/docs/library/tanstack-query/use-query.md +22 -22
- package/templates/nextjs/docs/library/zod/complex-types.md +11 -11
- package/templates/nextjs/docs/library/zod/index.md +8 -8
- package/templates/nextjs/docs/library/zod/transforms.md +11 -11
- package/templates/nextjs/docs/library/zod/validation.md +9 -9
- package/templates/npx/CLAUDE.md +38 -38
- package/templates/npx/docs/library/commander/index.md +12 -12
- package/templates/npx/docs/library/fs-extra/index.md +9 -9
- package/templates/npx/docs/library/prompts/index.md +3 -3
- package/templates/npx/docs/references/patterns.md +12 -12
- package/templates/tanstack-start/CLAUDE.md +54 -54
- package/templates/tanstack-start/docs/architecture.md +128 -128
- package/templates/tanstack-start/docs/design.md +169 -169
- package/templates/tanstack-start/docs/guides/conventions.md +43 -43
- package/templates/tanstack-start/docs/guides/env-setup.md +35 -35
- package/templates/tanstack-start/docs/guides/getting-started.md +19 -19
- package/templates/tanstack-start/docs/guides/hooks.md +45 -45
- package/templates/tanstack-start/docs/guides/routes.md +54 -54
- package/templates/tanstack-start/docs/guides/services.md +45 -45
- package/templates/tanstack-start/docs/library/prisma/cloudflare-d1.md +19 -19
- package/templates/tanstack-start/docs/library/prisma/config.md +16 -16
- package/templates/tanstack-start/docs/library/prisma/crud.md +17 -17
- package/templates/tanstack-start/docs/library/prisma/relations.md +16 -16
- package/templates/tanstack-start/docs/library/prisma/schema.md +23 -23
- package/templates/tanstack-start/docs/library/prisma/setup.md +6 -6
- package/templates/tanstack-start/docs/library/prisma/transactions.md +10 -10
- package/templates/tanstack-start/docs/library/tanstack-query/invalidation.md +19 -19
- package/templates/tanstack-start/docs/library/tanstack-query/optimistic-updates.md +4 -4
- package/templates/tanstack-start/docs/library/tanstack-query/use-mutation.md +14 -14
- package/templates/tanstack-start/docs/library/tanstack-query/use-query.md +21 -21
- package/templates/tanstack-start/docs/library/tanstack-router/error-handling.md +9 -9
- package/templates/tanstack-start/docs/library/tanstack-router/hooks.md +11 -11
- package/templates/tanstack-start/docs/library/tanstack-router/navigation.md +17 -17
- package/templates/tanstack-start/docs/library/tanstack-router/route-context.md +5 -5
- package/templates/tanstack-start/docs/library/tanstack-router/search-params.md +10 -10
- package/templates/tanstack-start/docs/library/tanstack-start/auth-patterns.md +8 -8
- package/templates/tanstack-start/docs/library/tanstack-start/middleware.md +9 -9
- package/templates/tanstack-start/docs/library/tanstack-start/routing.md +6 -6
- package/templates/tanstack-start/docs/library/tanstack-start/server-functions.md +18 -18
- package/templates/tanstack-start/docs/library/tanstack-start/setup.md +4 -4
- package/templates/tanstack-start/docs/library/zod/complex-types.md +11 -11
- package/templates/tanstack-start/docs/library/zod/transforms.md +11 -11
- package/templates/tanstack-start/docs/library/zod/validation.md +9 -9
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 관계 쿼리
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 중첩 생성
|
|
4
4
|
|
|
5
5
|
```typescript
|
|
6
6
|
const user = await prisma.user.create({
|
|
@@ -12,53 +12,53 @@ const user = await prisma.user.create({
|
|
|
12
12
|
})
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## 관계 연결
|
|
16
16
|
|
|
17
17
|
```typescript
|
|
18
|
-
// connect -
|
|
18
|
+
// connect - 기존 연결
|
|
19
19
|
author: { connect: { id: 1 } }
|
|
20
20
|
|
|
21
|
-
// connectOrCreate -
|
|
21
|
+
// connectOrCreate - 있으면 연결, 없으면 생성
|
|
22
22
|
categories: { connectOrCreate: { where: { name: 'Tech' }, create: { name: 'Tech' } } }
|
|
23
23
|
|
|
24
|
-
// disconnect -
|
|
24
|
+
// disconnect - 관계 해제
|
|
25
25
|
author: { disconnect: true }
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## 관계 포함 조회
|
|
29
29
|
|
|
30
30
|
```typescript
|
|
31
31
|
// include
|
|
32
32
|
const users = await prisma.user.findMany({ include: { posts: true, profile: true } })
|
|
33
33
|
|
|
34
|
-
//
|
|
34
|
+
// 중첩
|
|
35
35
|
include: { posts: { include: { categories: true } } }
|
|
36
36
|
|
|
37
|
-
//
|
|
37
|
+
// 필터 + 정렬
|
|
38
38
|
include: { posts: { where: { published: true }, orderBy: { createdAt: 'desc' }, take: 5 } }
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
##
|
|
41
|
+
## 관계로 필터링
|
|
42
42
|
|
|
43
43
|
```typescript
|
|
44
|
-
// some -
|
|
44
|
+
// some - 하나라도 만족
|
|
45
45
|
where: { posts: { some: { published: true } } }
|
|
46
46
|
|
|
47
|
-
// every -
|
|
47
|
+
// every - 모두 만족
|
|
48
48
|
where: { posts: { every: { published: true } } }
|
|
49
49
|
|
|
50
|
-
// none -
|
|
50
|
+
// none - 만족 없음
|
|
51
51
|
where: { posts: { none: { published: false } } }
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
##
|
|
54
|
+
## 카운트
|
|
55
55
|
|
|
56
56
|
```typescript
|
|
57
57
|
include: { _count: { select: { posts: true } } }
|
|
58
|
-
//
|
|
58
|
+
// 결과: { _count: { posts: 5 } }
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
##
|
|
61
|
+
## 중첩 수정/삭제
|
|
62
62
|
|
|
63
63
|
```typescript
|
|
64
64
|
// updateMany
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 스키마 정의 (Multi-File)
|
|
2
2
|
|
|
3
|
-
## ⚠️
|
|
3
|
+
## ⚠️ 필수 규칙
|
|
4
4
|
|
|
5
|
-
1. **Multi-File
|
|
6
|
-
2.
|
|
5
|
+
1. **Multi-File 구조** 사용
|
|
6
|
+
2. **모든 요소에 한글 주석** (파일, 모델, 필드, enum)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## 구조
|
|
9
9
|
|
|
10
10
|
```
|
|
11
11
|
prisma/schema/
|
|
12
12
|
├── +base.prisma # datasource, generator
|
|
13
|
-
├── +enum.prisma #
|
|
14
|
-
├── user.prisma # User
|
|
15
|
-
└── post.prisma # Post
|
|
13
|
+
├── +enum.prisma # 모든 enum
|
|
14
|
+
├── user.prisma # User 모델
|
|
15
|
+
└── post.prisma # Post 모델
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## 예시
|
|
19
19
|
|
|
20
20
|
```prisma
|
|
21
21
|
// +base.prisma
|
|
@@ -31,24 +31,24 @@ generator client {
|
|
|
31
31
|
|
|
32
32
|
// +enum.prisma
|
|
33
33
|
enum Role {
|
|
34
|
-
USER //
|
|
35
|
-
ADMIN //
|
|
34
|
+
USER // 일반 사용자
|
|
35
|
+
ADMIN // 관리자
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
// user.prisma
|
|
39
39
|
model User {
|
|
40
40
|
id Int @id @default(autoincrement())
|
|
41
|
-
email String @unique //
|
|
42
|
-
name String? //
|
|
41
|
+
email String @unique // 로그인 이메일
|
|
42
|
+
name String? // 표시 이름
|
|
43
43
|
role Role @default(USER)
|
|
44
|
-
posts Post[] //
|
|
45
|
-
profile Profile? //
|
|
44
|
+
posts Post[] // 작성 게시글 (1:N)
|
|
45
|
+
profile Profile? // 프로필 (1:1)
|
|
46
46
|
createdAt DateTime @default(now())
|
|
47
47
|
updatedAt DateTime @updatedAt
|
|
48
48
|
}
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
##
|
|
51
|
+
## 관계 유형
|
|
52
52
|
|
|
53
53
|
```prisma
|
|
54
54
|
// 1:1
|
|
@@ -64,11 +64,11 @@ model Post {
|
|
|
64
64
|
authorId Int
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
// M:N (
|
|
67
|
+
// M:N (암묵적)
|
|
68
68
|
model Post { categories Category[] }
|
|
69
69
|
model Category { posts Post[] }
|
|
70
70
|
|
|
71
|
-
// M:N (
|
|
71
|
+
// M:N (명시적)
|
|
72
72
|
model CategoriesOnPosts {
|
|
73
73
|
post Post @relation(fields: [postId], references: [id])
|
|
74
74
|
postId Int
|
|
@@ -78,21 +78,21 @@ model CategoriesOnPosts {
|
|
|
78
78
|
}
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
##
|
|
81
|
+
## 기타
|
|
82
82
|
|
|
83
83
|
```prisma
|
|
84
|
-
//
|
|
84
|
+
// 선택적 관계
|
|
85
85
|
author User? @relation(fields: [authorId], references: [id])
|
|
86
86
|
authorId Int?
|
|
87
87
|
|
|
88
|
-
//
|
|
88
|
+
// 인덱스
|
|
89
89
|
@@index([authorId])
|
|
90
90
|
@@index([createdAt])
|
|
91
91
|
|
|
92
|
-
//
|
|
92
|
+
// 복합 키
|
|
93
93
|
@@id([postId, tagId])
|
|
94
94
|
|
|
95
|
-
//
|
|
95
|
+
// 매핑
|
|
96
96
|
@map("user_id")
|
|
97
97
|
@@map("users")
|
|
98
98
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 설치 및 설정
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 설치
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
yarn add @prisma/client@7
|
|
@@ -8,15 +8,15 @@ yarn add -D prisma@7
|
|
|
8
8
|
npx prisma init
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## v6 → v7
|
|
11
|
+
## v6 → v7 업그레이드
|
|
12
12
|
|
|
13
13
|
```prisma
|
|
14
|
-
// v6 (
|
|
14
|
+
// v6 (이전)
|
|
15
15
|
generator client {
|
|
16
16
|
provider = "prisma-client-js"
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
// v7 (
|
|
19
|
+
// v7 (필수)
|
|
20
20
|
generator client {
|
|
21
21
|
provider = "prisma-client"
|
|
22
22
|
output = "../generated/prisma"
|
|
@@ -34,7 +34,7 @@ export const prisma = globalForPrisma.prisma ?? new PrismaClient({ log: ['query'
|
|
|
34
34
|
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
## TanStack Start
|
|
37
|
+
## TanStack Start 연동
|
|
38
38
|
|
|
39
39
|
```typescript
|
|
40
40
|
import { createServerFn } from '@tanstack/react-start'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 트랜잭션
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 배열 기반 트랜잭션
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
하나라도 실패하면 모두 롤백.
|
|
6
6
|
|
|
7
7
|
```typescript
|
|
8
8
|
const deletePosts = prisma.post.deleteMany({ where: { authorId: 7 } })
|
|
@@ -10,9 +10,9 @@ const deleteUser = prisma.user.delete({ where: { id: 7 } })
|
|
|
10
10
|
await prisma.$transaction([deletePosts, deleteUser])
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## 인터랙티브 트랜잭션
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
복잡한 로직, 조건부 처리.
|
|
16
16
|
|
|
17
17
|
```typescript
|
|
18
18
|
const result = await prisma.$transaction(async (tx) => {
|
|
@@ -26,17 +26,17 @@ const result = await prisma.$transaction(async (tx) => {
|
|
|
26
26
|
})
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
##
|
|
29
|
+
## 옵션
|
|
30
30
|
|
|
31
31
|
```typescript
|
|
32
32
|
await prisma.$transaction(async (tx) => { ... }, {
|
|
33
|
-
maxWait: 5000, //
|
|
34
|
-
timeout: 10000, //
|
|
33
|
+
maxWait: 5000, // 최대 대기 (ms)
|
|
34
|
+
timeout: 10000, // 타임아웃 (ms)
|
|
35
35
|
isolationLevel: 'Serializable', // ReadUncommitted | ReadCommitted | RepeatableRead | Serializable
|
|
36
36
|
})
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## 에러 처리
|
|
40
40
|
|
|
41
41
|
```typescript
|
|
42
42
|
try {
|
|
@@ -45,6 +45,6 @@ try {
|
|
|
45
45
|
if (someCondition) throw new Error('Rollback')
|
|
46
46
|
})
|
|
47
47
|
} catch (error) {
|
|
48
|
-
//
|
|
48
|
+
// 전체 롤백됨
|
|
49
49
|
}
|
|
50
50
|
```
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
# TanStack Query - Query
|
|
1
|
+
# TanStack Query - Query 무효화
|
|
2
2
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```typescript
|
|
6
6
|
const queryClient = useQueryClient()
|
|
7
7
|
|
|
8
|
-
//
|
|
8
|
+
// 단일
|
|
9
9
|
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
|
10
10
|
|
|
11
|
-
//
|
|
11
|
+
// 다중
|
|
12
12
|
await Promise.all([
|
|
13
13
|
queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
14
14
|
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
|
|
15
15
|
])
|
|
16
16
|
|
|
17
|
-
//
|
|
17
|
+
// 전체
|
|
18
18
|
queryClient.invalidateQueries()
|
|
19
19
|
|
|
20
|
-
//
|
|
20
|
+
// 옵션
|
|
21
21
|
queryClient.invalidateQueries({
|
|
22
22
|
queryKey: ['posts'],
|
|
23
|
-
exact: true, //
|
|
23
|
+
exact: true, // 정확한 키 매칭만
|
|
24
24
|
refetchType: 'active', // 'active' | 'inactive' | 'all' | 'none'
|
|
25
25
|
})
|
|
26
26
|
|
|
27
|
-
// Query Key
|
|
28
|
-
queryClient.invalidateQueries({ queryKey: ['todos'] }) //
|
|
29
|
-
queryClient.invalidateQueries({ queryKey: ['todos', 'list'], exact: true }) //
|
|
27
|
+
// Query Key 매칭
|
|
28
|
+
queryClient.invalidateQueries({ queryKey: ['todos'] }) // prefix 매칭
|
|
29
|
+
queryClient.invalidateQueries({ queryKey: ['todos', 'list'], exact: true }) // 정확한 매칭
|
|
30
30
|
|
|
31
|
-
//
|
|
31
|
+
// Mutation과 함께
|
|
32
32
|
useMutation({
|
|
33
33
|
mutationFn: addTodo,
|
|
34
34
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
35
|
-
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), //
|
|
35
|
+
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), // 성공/실패 무관
|
|
36
36
|
})
|
|
37
37
|
|
|
38
|
-
//
|
|
39
|
-
queryClient.setQueryData(['todos'], (old) => [...old, newTodo]) //
|
|
40
|
-
queryClient.invalidateQueries({ queryKey: ['todos'] }) //
|
|
38
|
+
// 직접 업데이트 vs 무효화
|
|
39
|
+
queryClient.setQueryData(['todos'], (old) => [...old, newTodo]) // 더 빠름
|
|
40
|
+
queryClient.invalidateQueries({ queryKey: ['todos'] }) // 서버 데이터 보장
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
</patterns>
|
|
44
44
|
|
|
45
45
|
<options>
|
|
46
46
|
|
|
47
|
-
| refetchType |
|
|
47
|
+
| refetchType | 설명 |
|
|
48
48
|
|-------------|------|
|
|
49
|
-
| active |
|
|
50
|
-
| inactive |
|
|
51
|
-
| all |
|
|
52
|
-
| none |
|
|
49
|
+
| active | 렌더링 중인 쿼리만 재조회 (기본) |
|
|
50
|
+
| inactive | 비활성 쿼리만 |
|
|
51
|
+
| all | 모든 매칭 쿼리 |
|
|
52
|
+
| none | 무효화만, 재조회 안함 |
|
|
53
53
|
|
|
54
54
|
</options>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 추가
|
|
7
7
|
useMutation({
|
|
8
8
|
mutationFn: addTodo,
|
|
9
9
|
onMutate: async (newTodo) => {
|
|
@@ -20,7 +20,7 @@ useMutation({
|
|
|
20
20
|
},
|
|
21
21
|
})
|
|
22
22
|
|
|
23
|
-
//
|
|
23
|
+
// 삭제
|
|
24
24
|
useMutation({
|
|
25
25
|
mutationFn: deleteTodo,
|
|
26
26
|
onMutate: async (todoId) => {
|
|
@@ -37,7 +37,7 @@ useMutation({
|
|
|
37
37
|
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
38
38
|
})
|
|
39
39
|
|
|
40
|
-
//
|
|
40
|
+
// 토글
|
|
41
41
|
useMutation({
|
|
42
42
|
mutationFn: toggleTodo,
|
|
43
43
|
onMutate: async (todoId) => {
|
|
@@ -56,7 +56,7 @@ useMutation({
|
|
|
56
56
|
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
57
57
|
})
|
|
58
58
|
|
|
59
|
-
//
|
|
59
|
+
// 단일 항목
|
|
60
60
|
useMutation({
|
|
61
61
|
mutationFn: updateTodo,
|
|
62
62
|
onMutate: async (newTodo) => {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 기본
|
|
7
7
|
const queryClient = useQueryClient()
|
|
8
8
|
const mutation = useMutation({
|
|
9
9
|
mutationFn: postTodo,
|
|
@@ -11,12 +11,12 @@ const mutation = useMutation({
|
|
|
11
11
|
})
|
|
12
12
|
mutation.mutate({ title: 'New Todo' })
|
|
13
13
|
|
|
14
|
-
//
|
|
14
|
+
// 콜백
|
|
15
15
|
useMutation({
|
|
16
16
|
mutationFn: updateTodo,
|
|
17
17
|
onMutate: async (newTodo) => {
|
|
18
|
-
//
|
|
19
|
-
return { previousData } //
|
|
18
|
+
// mutation 시작 전 (optimistic update용)
|
|
19
|
+
return { previousData } // context로 전달
|
|
20
20
|
},
|
|
21
21
|
onSuccess: (data, variables, context) => {},
|
|
22
22
|
onError: (error, variables, context) => {},
|
|
@@ -35,7 +35,7 @@ try {
|
|
|
35
35
|
const result = await mutation.mutateAsync(data)
|
|
36
36
|
} catch (error) { ... }
|
|
37
37
|
|
|
38
|
-
//
|
|
38
|
+
// 캐시 업데이트
|
|
39
39
|
useMutation({
|
|
40
40
|
mutationFn: patchTodo,
|
|
41
41
|
onSuccess: (data) => {
|
|
@@ -49,15 +49,15 @@ useMutation({
|
|
|
49
49
|
|
|
50
50
|
<returns>
|
|
51
51
|
|
|
52
|
-
|
|
|
52
|
+
| 속성 | 설명 |
|
|
53
53
|
|------|------|
|
|
54
|
-
| data |
|
|
55
|
-
| error |
|
|
56
|
-
| isPending |
|
|
57
|
-
| isSuccess/isError |
|
|
58
|
-
| mutate |
|
|
59
|
-
| mutateAsync |
|
|
60
|
-
| reset |
|
|
61
|
-
| variables |
|
|
54
|
+
| data | mutation 결과 |
|
|
55
|
+
| error | 에러 객체 |
|
|
56
|
+
| isPending | 실행 중 |
|
|
57
|
+
| isSuccess/isError | 상태 |
|
|
58
|
+
| mutate | 실행 (비동기) |
|
|
59
|
+
| mutateAsync | 실행 (Promise) |
|
|
60
|
+
| reset | 상태 초기화 |
|
|
61
|
+
| variables | 전달된 변수 |
|
|
62
62
|
|
|
63
63
|
</returns>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 기본
|
|
7
7
|
const { data, isLoading, error } = useQuery({
|
|
8
8
|
queryKey: ['todos'],
|
|
9
9
|
queryFn: getTodos,
|
|
@@ -11,28 +11,28 @@ const { data, isLoading, error } = useQuery({
|
|
|
11
11
|
if (isLoading) return <div>Loading...</div>
|
|
12
12
|
if (error) return <div>Error: {error.message}</div>
|
|
13
13
|
|
|
14
|
-
//
|
|
14
|
+
// 옵션
|
|
15
15
|
useQuery({
|
|
16
16
|
queryKey: ['todos'],
|
|
17
17
|
queryFn: fetchTodos,
|
|
18
|
-
staleTime: 1000 * 60 * 5, //
|
|
19
|
-
gcTime: 1000 * 60 * 30, //
|
|
20
|
-
refetchOnWindowFocus: true, //
|
|
21
|
-
refetchInterval: 1000 * 60, //
|
|
22
|
-
retry: 3, //
|
|
23
|
-
enabled: !!userId, //
|
|
24
|
-
initialData: [], //
|
|
25
|
-
select: (data) => data.filter(t => t.done), //
|
|
18
|
+
staleTime: 1000 * 60 * 5, // fresh 유지 시간
|
|
19
|
+
gcTime: 1000 * 60 * 30, // 가비지 컬렉션 시간
|
|
20
|
+
refetchOnWindowFocus: true, // 포커스 시 리페치
|
|
21
|
+
refetchInterval: 1000 * 60, // 자동 리페치 간격
|
|
22
|
+
retry: 3, // 재시도 횟수
|
|
23
|
+
enabled: !!userId, // 조건부 실행
|
|
24
|
+
initialData: [], // 초기 데이터
|
|
25
|
+
select: (data) => data.filter(t => t.done), // 데이터 변환
|
|
26
26
|
})
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// 파라미터
|
|
29
29
|
useQuery({
|
|
30
30
|
queryKey: ['todo', todoId],
|
|
31
31
|
queryFn: () => fetchTodoById(todoId),
|
|
32
32
|
enabled: !!todoId,
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
//
|
|
35
|
+
// 의존적 쿼리
|
|
36
36
|
const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: ... })
|
|
37
37
|
const { data: posts } = useQuery({
|
|
38
38
|
queryKey: ['posts', user?.id],
|
|
@@ -40,11 +40,11 @@ const { data: posts } = useQuery({
|
|
|
40
40
|
enabled: !!user?.id,
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
-
//
|
|
43
|
+
// 병렬
|
|
44
44
|
const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
|
|
45
45
|
const postsQuery = useQuery({ queryKey: ['posts'], queryFn: fetchPosts })
|
|
46
46
|
|
|
47
|
-
//
|
|
47
|
+
// 동적 병렬
|
|
48
48
|
const userQueries = useQueries({
|
|
49
49
|
queries: userIds.map((id) => ({
|
|
50
50
|
queryKey: ['user', id],
|
|
@@ -57,14 +57,14 @@ const userQueries = useQueries({
|
|
|
57
57
|
|
|
58
58
|
<returns>
|
|
59
59
|
|
|
60
|
-
|
|
|
60
|
+
| 속성 | 설명 |
|
|
61
61
|
|------|------|
|
|
62
|
-
| data |
|
|
63
|
-
| error |
|
|
64
|
-
| isLoading |
|
|
65
|
-
| isFetching |
|
|
66
|
-
| isError/isSuccess |
|
|
67
|
-
| refetch |
|
|
62
|
+
| data | 쿼리 결과 |
|
|
63
|
+
| error | 에러 객체 |
|
|
64
|
+
| isLoading | 첫 로딩 중 |
|
|
65
|
+
| isFetching | 백그라운드 페칭 중 |
|
|
66
|
+
| isError/isSuccess | 상태 |
|
|
67
|
+
| refetch | 수동 리페치 |
|
|
68
68
|
| status | 'pending' \| 'error' \| 'success' |
|
|
69
69
|
|
|
70
70
|
</returns>
|
|
@@ -48,8 +48,8 @@ export const Route = createRootRoute({
|
|
|
48
48
|
export const Route = createFileRoute('/posts')({
|
|
49
49
|
loader: async () => fetchPosts(),
|
|
50
50
|
pendingComponent: () => <Spinner />,
|
|
51
|
-
pendingMs: 200, //
|
|
52
|
-
pendingMinMs: 500, //
|
|
51
|
+
pendingMs: 200, // 200ms 후 표시
|
|
52
|
+
pendingMinMs: 500, // 최소 500ms 유지 (깜빡임 방지)
|
|
53
53
|
component: PostsPage,
|
|
54
54
|
})
|
|
55
55
|
|
|
@@ -61,7 +61,7 @@ export const Route = createFileRoute('/$')({
|
|
|
61
61
|
},
|
|
62
62
|
})
|
|
63
63
|
|
|
64
|
-
//
|
|
64
|
+
// 에러 타입 구분
|
|
65
65
|
const CustomError = ({ error, reset }: ErrorComponentProps) => {
|
|
66
66
|
if (error instanceof TypeError && error.message.includes('fetch')) {
|
|
67
67
|
return <div><p>Network error</p><button onClick={reset}>Retry</button></div>
|
|
@@ -77,13 +77,13 @@ const CustomError = ({ error, reset }: ErrorComponentProps) => {
|
|
|
77
77
|
|
|
78
78
|
<priority>
|
|
79
79
|
|
|
80
|
-
|
|
|
80
|
+
| 우선순위 | 컴포넌트 | 조건 |
|
|
81
81
|
|---------|---------|------|
|
|
82
|
-
| 1 | `errorComponent` |
|
|
83
|
-
| 2 | `notFoundComponent` | `notFound()`
|
|
84
|
-
| 3 | `pendingComponent` |
|
|
85
|
-
| 4 | `component` |
|
|
82
|
+
| 1 | `errorComponent` | loader/beforeLoad에서 Error throw |
|
|
83
|
+
| 2 | `notFoundComponent` | `notFound()` throw |
|
|
84
|
+
| 3 | `pendingComponent` | loader 실행 중 (pendingMs 이후) |
|
|
85
|
+
| 4 | `component` | 정상 렌더링 |
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
에러 전파: 하위 → 상위 (errorComponent 없으면 부모로 전파)
|
|
88
88
|
|
|
89
89
|
</priority>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
```tsx
|
|
6
6
|
// Route-Scoped (Type-safe)
|
|
7
7
|
const PostPage = () => {
|
|
8
|
-
const { post } = Route.useLoaderData() // Loader
|
|
8
|
+
const { post } = Route.useLoaderData() // Loader 반환값
|
|
9
9
|
const { postId } = Route.useParams() // Path params
|
|
10
10
|
const { page, sort } = Route.useSearch() // Search params
|
|
11
11
|
const { user } = Route.useRouteContext() // Route context
|
|
@@ -20,10 +20,10 @@ const postMatch = useMatch({ from: '/posts/$postId', shouldThrow: false })
|
|
|
20
20
|
if (postMatch) return <span>Post: {postMatch.params.postId}</span>
|
|
21
21
|
|
|
22
22
|
const { postId } = useParams({ from: '/posts/$postId' })
|
|
23
|
-
const params = useParams({ strict: false }) //
|
|
23
|
+
const params = useParams({ strict: false }) // 모든 params
|
|
24
24
|
|
|
25
25
|
const { page } = useSearch({ from: '/products' })
|
|
26
|
-
const search = useSearch({ strict: false }) //
|
|
26
|
+
const search = useSearch({ strict: false }) // 현재 search
|
|
27
27
|
|
|
28
28
|
const pathname = useRouterState({ select: state => state.location.pathname })
|
|
29
29
|
const isLoading = useRouterState({ select: state => state.isLoading })
|
|
@@ -37,17 +37,17 @@ console.log(location.search) // { page: 1 }
|
|
|
37
37
|
|
|
38
38
|
<reference>
|
|
39
39
|
|
|
40
|
-
| Hook | Scope | Type |
|
|
40
|
+
| Hook | Scope | Type | 용도 |
|
|
41
41
|
|------|-------|------|------|
|
|
42
|
-
| `Route.useLoaderData()` | Route | Auto | Loader
|
|
42
|
+
| `Route.useLoaderData()` | Route | Auto | Loader 데이터 |
|
|
43
43
|
| `Route.useParams()` | Route | Auto | Path params |
|
|
44
44
|
| `Route.useSearch()` | Route | Auto | Search params |
|
|
45
45
|
| `Route.useRouteContext()` | Route | Auto | Route context |
|
|
46
|
-
| `useParams({ from })` | Global | Manual |
|
|
47
|
-
| `useSearch({ from })` | Global | Manual |
|
|
48
|
-
| `useMatch({ from })` | Global | Manual |
|
|
49
|
-
| `useNavigate()` | Global | Auto |
|
|
50
|
-
| `useRouterState()` | Global | Manual |
|
|
51
|
-
| `useLocation()` | Global | Auto |
|
|
46
|
+
| `useParams({ from })` | Global | Manual | 다른 라우트 params |
|
|
47
|
+
| `useSearch({ from })` | Global | Manual | 다른 라우트 search |
|
|
48
|
+
| `useMatch({ from })` | Global | Manual | 라우트 매치 정보 |
|
|
49
|
+
| `useNavigate()` | Global | Auto | 네비게이션 |
|
|
50
|
+
| `useRouterState()` | Global | Manual | 라우터 상태 |
|
|
51
|
+
| `useLocation()` | Global | Auto | 현재 location |
|
|
52
52
|
|
|
53
53
|
</reference>
|