From d62db9951d1e6f93f00afb449614c000aa548351 Mon Sep 17 00:00:00 2001
From: Jason Kim <actcrazy@gmail.com>
Date: Wed, 25 Jun 2025 19:31:21 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20useInifiniteQuery=EC=9D=98=20initialPag?=
 =?UTF-8?q?eParams=EC=99=80=20queryKey=20=EA=B4=80=EA=B3=84=EC=97=90=20?=
 =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=84=A4=EB=AA=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/README.md b/README.md
index 7b2a29a..ad87830 100644
--- a/README.md
+++ b/README.md
@@ -993,6 +993,45 @@ const InfiniteQueries = () => {
 
 - initialPageParam을 이용해서 첫 페이지를 가져올 때 사용할 기본 페이지 매개변수이다. `필수값`이다.
 
+#### 중요한 동작 특성
+
+- `initialPageParam`은 쿼리가 처음 실행될 때 `pageParams[0]`에 기록되며, **동일한 queryKey를 가진 쿼리의 전체 캐시 생명주기 동안 고정된 값으로 유지**된다.
+- 만약 여러 컴포넌트에서 동일한 `queryKey`를 사용하지만 서로 다른 `initialPageParam` 값으로 `useInfiniteQuery`를 호출하는 경우, **가장 먼저 호출된 값이 일관되게 사용**된다.
+
+#### queryKey와의 관계
+
+- 서로 다른 `initialPageParam` 값을 사용하는 경우, **queryKey에도 해당 값을 포함**시켜야 한다.
+- `initialPageParam`이 다르면 사실상 다른 데이터 세트를 의미하므로, **queryKey도 그에 맞춰 구분**되어야 한다.
+- 즉, `initialPageParam`의 값이 변경될 때마다 queryKey도 함께 변경하는 것이 올바른 패턴이다.
+
+```typescript
+// 잘못된 예: 같은 queryKey로 다른 initialPageParam 사용
+const query1 = useInfiniteQuery({
+  queryKey: ["posts", "infinite"], // 동일한 queryKey
+  queryFn: fetchPosts,
+  initialPageParam: 0, // 첫 번째 호출: 0이 사용됨
+});
+
+const query2 = useInfiniteQuery({
+  queryKey: ["posts", "infinite"], // 동일한 queryKey
+  queryFn: fetchPosts,
+  initialPageParam: 10, // 두 번째 호출: 무시되고 여전히 0이 사용됨
+});
+
+// 올바른 예: initialPageParam 값을 queryKey에 포함
+const query1 = useInfiniteQuery({
+  queryKey: ["posts", "infinite", { initialPage: 0 }], // initialPageParam을 queryKey에 반영
+  queryFn: fetchPosts,
+  initialPageParam: 0,
+});
+
+const query2 = useInfiniteQuery({
+  queryKey: ["posts", "infinite", { initialPage: 10 }], // initialPageParam을 queryKey에 반영
+  queryFn: fetchPosts,
+  initialPageParam: 10,
+});
+```
+
 2. getNextPageParam: `(lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null`
 
 - getNextPageParam 을 이용해서 페이지를 증가시킬 수 있다. `필수값`이다.