docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: web-graphql-client-patterns
|
||||
title: GraphQL Client — Apollo / urql / Relay 비교
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [web, graphql, apollo, urql, relay, vibe-coding]
|
||||
tech_stack: { language: "TypeScript / Apollo / urql / Relay", applicable_to: ["Web"] }
|
||||
applied_in: []
|
||||
aliases: [normalized cache, query, mutation, subscription, codegen]
|
||||
---
|
||||
|
||||
# GraphQL Client
|
||||
|
||||
> 3대 클라이언트 — Apollo (가장 널리), urql (가벼움), Relay (Meta, 강력하지만 학습곡선). 공통: **codegen 으로 타입 자동 + cache 정책 명시 + fragment co-location**.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- Codegen: schema → TS 타입 + hook 자동.
|
||||
- Normalized cache: id 기반 객체 dedup.
|
||||
- Fragment: 컴포넌트가 자기 데이터 spec.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
### Apollo Client + codegen
|
||||
```ts
|
||||
// schema.graphql + queries.graphql 작성 후
|
||||
// codegen.yml
|
||||
schema: 'schema.graphql'
|
||||
documents: 'src/**/*.graphql'
|
||||
generates:
|
||||
src/__generated__/types.ts:
|
||||
plugins:
|
||||
- typescript
|
||||
- typescript-operations
|
||||
- typescript-react-apollo
|
||||
config:
|
||||
withHooks: true
|
||||
```
|
||||
|
||||
```ts
|
||||
// query.graphql
|
||||
query GetUser($id: ID!) {
|
||||
user(id: $id) { id email name }
|
||||
}
|
||||
|
||||
// 사용
|
||||
import { useGetUserQuery } from './__generated__/types';
|
||||
function Profile({ id }: { id: string }) {
|
||||
const { data, loading, error } = useGetUserQuery({ variables: { id } });
|
||||
if (loading) return <Spinner />;
|
||||
if (error) return <Error msg={error.message} />;
|
||||
return <h1>{data?.user.name}</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
### Cache 정책
|
||||
```ts
|
||||
const client = new ApolloClient({
|
||||
cache: new InMemoryCache({
|
||||
typePolicies: {
|
||||
Query: {
|
||||
fields: {
|
||||
orders: { merge(existing = [], incoming) { return [...existing, ...incoming]; } }, // pagination
|
||||
},
|
||||
},
|
||||
Order: {
|
||||
keyFields: ['id'],
|
||||
fields: { items: { merge: false } }, // 항상 replace
|
||||
},
|
||||
},
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
### Mutation + cache update
|
||||
```ts
|
||||
const [createPost] = useCreatePostMutation({
|
||||
update(cache, { data }) {
|
||||
cache.modify({
|
||||
fields: {
|
||||
posts(existing = []) {
|
||||
return [...existing, cache.writeFragment({
|
||||
data: data?.createPost,
|
||||
fragment: gql`fragment NewPost on Post { id title }`,
|
||||
})];
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### urql — 가벼운 대안
|
||||
```ts
|
||||
import { useQuery } from 'urql';
|
||||
|
||||
const [{ data, fetching, error }] = useQuery({
|
||||
query: GetUserDocument,
|
||||
variables: { id },
|
||||
});
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 상황 | 클라이언트 |
|
||||
|---|---|
|
||||
| 큰 앱 + 복잡 cache | Apollo |
|
||||
| 가벼운 / Vue / Svelte | urql |
|
||||
| Meta 스타일 fragment co-location 강제 | Relay |
|
||||
| Server Components / RSC | graphql-request 또는 fetch |
|
||||
| Subscription 많이 | apollo-client + ws link |
|
||||
| 단순 fetch | tanstack-query + graphql-request |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **codegen 안 쓰고 string query**: 타입 안전 0.
|
||||
- **fragment 안 쓰고 컴포넌트마다 큰 query**: over-fetch + 중복.
|
||||
- **cache 정책 미정의 → list mutation 후 stale**: cache.modify / refetchQueries.
|
||||
- **subscription 무한 reconnect 없음**: 연결 끊겨도 모름.
|
||||
- **모든 GraphQL 호출 서버 SSR**: client 만 가능한 건 nullable.
|
||||
- **N+1 쿼리 그대로 노출**: server 측 DataLoader 필수.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- 신규 = Apollo + codegen + fragment.
|
||||
- cache 정책은 도메인별 명시.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[DB_N_Plus_One]]
|
||||
- [[React_Suspense_for_Data]]
|
||||
Reference in New Issue
Block a user