+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
new file mode 100644
index 0000000..8285ecf
--- /dev/null
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -0,0 +1,5 @@
+function Page(){
+ return
test
+}
+
+export default Page
\ No newline at end of file
From fc2eed4610d400180ab0e44b8b98594a46e0986c Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Sat, 7 Feb 2026 23:05:20 +0900
Subject: [PATCH 05/19] =?UTF-8?q?feat:=20AppRoutes=EC=97=90=EC=84=9C=20mic?=
=?UTF-8?q?ro=20provider=20=EC=84=A4=EC=A0=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 외부에서 QueryClientProvider 설정이 가능하게 creaateQueryClient 구현
---
log/workspace/react/ts/src/main.tsx | 5 ++-
.../react/ts/src/provider/QueryProviders.tsx | 28 ++++++++++++++++
.../react/ts/src/services/axiosInstance.ts | 11 +++++++
.../react/ts/src/services/queryClient.ts | 33 +++++++++++++++++++
log/workspace/react/ts/src/types.ts | 5 +++
5 files changed, 81 insertions(+), 1 deletion(-)
create mode 100644 log/workspace/react/ts/src/provider/QueryProviders.tsx
create mode 100644 log/workspace/react/ts/src/services/axiosInstance.ts
create mode 100644 log/workspace/react/ts/src/services/queryClient.ts
create mode 100644 log/workspace/react/ts/src/types.ts
diff --git a/log/workspace/react/ts/src/main.tsx b/log/workspace/react/ts/src/main.tsx
index ade9d64..766243a 100644
--- a/log/workspace/react/ts/src/main.tsx
+++ b/log/workspace/react/ts/src/main.tsx
@@ -1,13 +1,16 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
+import { QueryProviders } from './provider/QueryProviders.tsx'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
-
+
+
+ ,
)
diff --git a/log/workspace/react/ts/src/provider/QueryProviders.tsx b/log/workspace/react/ts/src/provider/QueryProviders.tsx
new file mode 100644
index 0000000..b1ecac4
--- /dev/null
+++ b/log/workspace/react/ts/src/provider/QueryProviders.tsx
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createQueryClient } from "../services/queryClient";
+import type { ReactNodeProps } from "../types";
+
+interface QueryProvidersProps extends ReactNodeProps {
+ queryClient?: ReturnType
+}
+
+/**
+ * @see {@link createQueryClient} 커스텀 QueryClient 생성
+ * @example 커스텀 QueryClient 주입
+ * const customClient = createQueryClient({ queries: { staleTime: 0 } })
+ *
+ *
+ *
+ */
+export function QueryProviders({children, queryClient}: QueryProvidersProps){
+ // useRef가 의미상 맞다 판단 하였으나, 19버전 이후부터는 useRef를 렌더 중 ref.currnet를 읽게 되면 error가 발생
+ const [client] = useState(() => queryClient ?? createQueryClient()); // 일반 함수 사용시 매번 새 인스턴스를 생성 따라 상태 값으로 동일 인스턴스 사용(팩토리 패턴)
+ return (
+
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/axiosInstance.ts b/log/workspace/react/ts/src/services/axiosInstance.ts
new file mode 100644
index 0000000..0d2baf0
--- /dev/null
+++ b/log/workspace/react/ts/src/services/axiosInstance.ts
@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const API = 'https://reqres.in/api'
+
+export const axiosInstance = axios.create({
+ baseURL: API,
+ timeout: 10000,
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+})
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
new file mode 100644
index 0000000..8ab01a1
--- /dev/null
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -0,0 +1,33 @@
+import { QueryClient } from "@tanstack/react-query";
+import type { QueryClientConfig } from "@tanstack/react-query";
+
+/**
+ * @TODO 각 페이지 설정을
+ */
+const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+/**
+ * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+ */
+
+export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
+ return new QueryClient({
+ defaultOptions: {
+ queries: {
+ ...DEFAULT_OPTIONS?.queries,
+ ...options?.queries, // override
+ },
+ mutations: {
+ ...DEFAULT_OPTIONS?.mutations,
+ ...options?.mutations, // undefined
+ }
+ },
+ })
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/types.ts b/log/workspace/react/ts/src/types.ts
new file mode 100644
index 0000000..0b9e5f0
--- /dev/null
+++ b/log/workspace/react/ts/src/types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export interface ReactNodeProps {
+ children: ReactNode
+}
\ No newline at end of file
From 68b8a76411ee25710415860ef91e0e3cf0ee4480 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:35:08 +0900
Subject: [PATCH 06/19] =?UTF-8?q?feat:=20queryClient=20=EC=95=88=ED=8B=B0?=
=?UTF-8?q?=20=ED=8C=A8=ED=84=B4=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
=?UTF-8?q?=20=EB=B0=8F=20config=20=EA=B0=9D=EC=B2=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/queryClient.ts | 26 +++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
index 8ab01a1..3927d34 100644
--- a/log/workspace/react/ts/src/services/queryClient.ts
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -2,7 +2,7 @@ import { QueryClient } from "@tanstack/react-query";
import type { QueryClientConfig } from "@tanstack/react-query";
/**
- * @TODO 각 페이지 설정을
+ * @TODO 각 페이지 설정 기준으로 관리할 수 있게 분리 필요.
*/
const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
queries: {
@@ -14,7 +14,29 @@ const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
}
/**
- * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+const TEST_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+const STORYBOOK_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+*/
+
+/**
+ * @description 대규모 도메인 관리라 가정하고 생성한 함수이다. 따라서, createQueryClient는 micro frontend와 같은 개념으로 접목해서 사용하면 좋겠단 생각을 했다.
+ * @deprecated 해당 함수를 각 페이지별로 override해서 관리해보려 했으나. 이는 캐시 분리, 데이터 공유 불가, 메모리 낭비와 같은 안티 패턴이다.
+ * @remark 추후 전역 관리로 이관 예정, 외부에서 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다. 더불어 페이지가 아닌 성격이 다른 도메인과 같은 곳에서 사용하면 효과적이다.
*/
export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
From fce986909fbadc5678cc2b715ad83c64e459b725 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:36:27 +0900
Subject: [PATCH 07/19] =?UTF-8?q?feat:=20`reqres`=20user=20api=EC=97=90=20?=
=?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20service=20=ED=9E=98?=
=?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/users.axios.ts | 44 +++++++++++++++++++
1 file changed, 44 insertions(+)
create mode 100644 log/workspace/react/ts/src/services/users.axios.ts
diff --git a/log/workspace/react/ts/src/services/users.axios.ts b/log/workspace/react/ts/src/services/users.axios.ts
new file mode 100644
index 0000000..f1eb2a2
--- /dev/null
+++ b/log/workspace/react/ts/src/services/users.axios.ts
@@ -0,0 +1,44 @@
+import { axiosInstance } from "./axiosInstance";
+
+export interface User {
+ id: number
+ email: string
+ firstName: string
+ lastName: string
+ avator: string
+}
+
+interface UsersResponse {
+ page: number
+ perPage: number
+ total: number
+ totalPages: number
+ data: User[]
+}
+
+interface UserResponse {
+ data: User
+}
+
+/** Users list */
+export async function getUsers(page = 1): Promise{
+ const { data } = await axiosInstance.get('/users', {
+ params: { page }
+ });
+
+ return data;
+}
+
+/** User */
+export async function getUser(id: number): Promise{
+ const { data } = await axiosInstance.get(`/users/${id}`);
+ return data.data
+}
+
+/** Create User
+ * @TODO : GenricTypes 추가 필요, payload: interface UserRequired 필요
+*/
+export async function createUser(payload: {name: string; job: string;}) {
+ const {data} = await axiosInstance.post('/users', payload)
+ return data
+}
\ No newline at end of file
From 8c0acf65fcb8ff4f3f938399b510440e45082a56 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:45:37 +0900
Subject: [PATCH 08/19] =?UTF-8?q?feat:=20user=EB=A5=BC=20=EC=A1=B0?=
=?UTF-8?q?=ED=9A=8C=ED=95=98=EA=B3=A0=20=EC=83=9D=EC=84=B1=ED=95=A0=20?=
=?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8A=94=20=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/workspace/react/ts/src/hooks/useUsers.ts | 38 ++++++++++++++++++++
1 file changed, 38 insertions(+)
create mode 100644 log/workspace/react/ts/src/hooks/useUsers.ts
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
new file mode 100644
index 0000000..cdac2a3
--- /dev/null
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -0,0 +1,38 @@
+// TODO: QueryKey를 관리 할 수 있는 디렉토리 필요
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getUsers, getUser, createUser } from "../services/users.axios";
+
+export const userKeys = {
+ all: ['users'] as const,
+ lists: () => [...userKeys.all, 'list'] as const,
+ list: (page: number) => [...userKeys.lists(), page] as const,
+ details: () => [...userKeys.all, 'detail'] as const,
+ detail: (id: number) => [...userKeys.details(), id] as const,
+}
+
+export function useUsers(page = 1){
+ return useQuery({
+ queryKey: userKeys.list(page),
+ queryFn: () => getUsers(page),
+ })
+}
+
+export function useUser(id: number){
+ return useQuery({
+ queryKey: userKeys.detail(id),
+ queryFn: () => getUser(id),
+ enabled: !!id,
+ })
+}
+
+
+export function useCreateUser(){
+ const QueryClient = useQueryClient()
+
+ return useMutation({
+ mutationFn: createUser,
+ onSuccess: () => {
+ QueryClient.invalidateQueries({queryKey: userKeys.lists()})
+ }
+ })
+}
From ed3382eef6f62d7c9fe509b3ad23090d5df4a8ed Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:46:04 +0900
Subject: [PATCH 09/19] =?UTF-8?q?feat:=20=EA=B0=84=EB=8B=A8=ED=95=9C=20int?=
=?UTF-8?q?erface=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../ts/src/pages/tanstackquery/index.tsx | 25 ++++++++++++++++++-
1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
index 8285ecf..b5ea8ea 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -1,5 +1,28 @@
+import { useUsers, useCreateUser } from "../../hooks/useUsers"
+
function Page(){
- return
+ )
+}
+
+export default Page
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
index 9024497..aef7b3f 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -1,9 +1,12 @@
+import { Link } from "react-router-dom"
import { useUsers, useCreateUser } from "../../hooks/useUsers"
function Page(){
const { data, isLoading, error } = useUsers()
const createUser = useCreateUser()
+ console.log('[List] data:', data?.map(u => u.name))
+
if (isLoading) return
Loading...
if (error) return
Error!
@@ -12,7 +15,9 @@ function Page(){
Users
{data?.map((user) => (
-
{user.name}
+
+ {user.name}
+
))}
From 26e89bf61b18e96cba6c3868206ae943e6c5f2b6 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 00:09:14 +0900
Subject: [PATCH 16/19] =?UTF-8?q?docs:=20=EC=9E=91=EC=97=85=20=EC=A4=91=20?=
=?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=9C=20=ED=8A=B8=EB=9F=AC=EB=B8=94=20?=
=?UTF-8?q?=EC=8A=88=ED=8C=85=20=EB=AC=B8=EC=84=9C=ED=99=94=20=EC=9E=91?=
=?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 29 +++++++++++++++++++++++
1 file changed, 29 insertions(+)
create mode 100644 log/data/poby/tanstackquery-cache-data.md
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
new file mode 100644
index 0000000..b04cf76
--- /dev/null
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -0,0 +1,29 @@
+# TanStack Query Stale Cache
+
+## 배경
+
+## 원인
+
+## 해결 방안
+
+## 트러블슈팅
+
+현재 TQ provider의 query 설정 외부 주입할 수 있게 작성을 했다. 이런 방법은 현재로는 매우 오버스팩일 수 있겠다는 생각을 했다.
+
+### createQueryClinet anti-pattern
+
+- 현재 createQueryClient는 micro 디렉토리 전략 방식에 사용하기 위해서 분리를 했으나 이로 인해서 발생하는 문제는 다음과 같다.
+ - 각 페이지간 서로의 캐시를 공유할 수 없게된다. 즉, Provider간 key 값이 달라지기 때문에 그렇다. 그로 인해서 메모리 낭비가 발생한다. 매번 QueryClinet가 여러개 새로 생성되기 때문이다.
+
+- 그렇다면 createQueryClinet는 어떻게 사용하면 좋을까?
+ - 테스트 환경에서 사용하면 좋다.
+ - 환경별(dev/prod)와 같이 분리된 공간에서 사용하면 좋다.
+ - 임베디드 위젯과 같이 독립된 곳에서 사용하면 좋다.
+ - Storybook과 같은 곳에서 사용하면 좋다.
+ - 즉, 모노레포와 같은 곳에서 사용, 각기 다른 도메인과 같은 곳에서 사용하면 좋다. 따라서 해상 createQueryClient는 common이나 shared같은 곳에서 관리하면서 사용하면 좋다.
+
+- 결론은 개별 쿼리 훅(ex.useUsers)에서 관리하면서 사용하는 것이 좋다.
+
+### 참고 문서
+
+- [micro frontend](https://jobkaehenry.tistory.com/64)
From 330316b3d4cc42a37e65f89eb2cc4e09692f3c52 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:31:44 +0900
Subject: [PATCH 17/19] =?UTF-8?q?docs:=20stale=20cache=EC=9D=98=20?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EB=AC=B8=EC=A0=9C?=
=?UTF-8?q?=EC=A0=90=20=EB=AC=B8=EC=84=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 78 +++++++++++++++++++
log/workspace/react/ts/src/hooks/useUsers.ts | 8 +-
.../ts/src/pages/tanstackquery/[id]/index.tsx | 9 +--
.../react/ts/src/services/types/user.types.ts | 0
4 files changed, 83 insertions(+), 12 deletions(-)
create mode 100644 log/workspace/react/ts/src/services/types/user.types.ts
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index b04cf76..9a05199 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -2,10 +2,86 @@
## 배경
+상세 정보에서 사용자의 데이터를 변경 또는 수정을 하고 다시 리스트로 돌아가면 리스트에서는 과거의 데이터가 남아 있는 경우가 있다. 이럴 때, cache를 invalidateQueries를 사용해서 무력화 하는데, invalidateQueries가 동작하는 방식과 invalidateQueries 대시 다른 대안과 해결책을 모색하는 것이 목표이자, 배경이다.
+
+## 문제점
+
+1. 불필요한 네트워크 요청 - 이미 mutation 응답에 새 데이터가 있는데 또 fetch
+2. Stale cache 문제 - 상호작용 되어야하는 페이지간 querykey를 여러번 호출
+3. UX 저하 - 업데이트 후 깜빡임
+
## 원인
+> 해당 문서는 문제점 2번을 중점으로 바라본 문서이다.
+
+invalidateQueries를 사용하면 cache를 강제로 refetch를 한다고 이해를 했다. 하지만, invalidateQueries는 cache의 상태를 stale 상태로 변경을 하고 마운트 언마운트 상태에 따라 refetch의 수행이 이루어진다. invalidateQueries의 동작방식은 ~~(TQ는 cache를 신선도에 따라 상태를 분리한다.)~~ 현재 key의 cache가 fresh 하던 stale 하던 상관 없이 stale로 상태를 둔다. 그리고 현 페이지가 ~~(invalidateQueries를 호출하고)~~ 마운트가 된 상태라면 refetch가 된다. 정리하자면, 상세 페이지에서는 invalidateQueries로 stale mark를 찍고 마운트가 되면 refetch가 이루어진다. 단, 목록 페이지에서는 cache의 상태값을 변경하는 로직이 없기 때문에, 변경된 값이 반영되지 않고 이전 데이터가 보이는 것이다.
+
## 해결 방안
+> useUsers.ts의 [useUpdateUser](../../workspace/react/ts/src/hooks/useUsers.ts) 참고
+
+- setQueryData
+ - setQueryData를 사용해서 직접 특정 querykey를 업데이트, 리스트도 함께 업데이트 하는 방법이 있다.
+
+ ```ts
+ export function useUpdateUser() {
+ const queryClient = useQueryClient()
+
+ return useMutation({
+ mutationFn: ({ id, ...payload }) => updateUser(id, payload),
+ onSuccess: (newUser) => {
+ // 서버 응답으로 캐시 직접 업데이트
+ queryClient.setQueryData(
+ userKeys.detail(newUser.id),
+ newUser
+ )
+ // 리스트도 업데이트
+ queryClient.setQueryData(userKeys.lists(), (old) =>
+ old?.map(user => user.id === newUser.id ? newUser : user)
+ )
+ }
+ })
+ }
+ ```
+
+- Optimistic update
+ - 낙관적 업데이트 방법은 실문에서 자주 사용했다. 변경된 UI를 Network 요청 결과와는 무관하게 즉시 없데이트를 하고, onError와 같은 실패 시 롤백 할 수 있게 구현을 방법이다.
+
+ ```ts
+ useMutation({
+ mutationFn: updateUser,
+ onMutate: async (newData) => {
+ await queryClient.cancelQueries({ queryKey: userKeys.lists() })
+ const previous = queryClient.getQueryData(userKeys.lists())
+
+ // 즉시 UI 업데이트
+ queryClient.setQueryData(userKeys.lists(), (old) =>
+ old?.map(u => u.id === newData.id ? {...u, ...newData} : u)
+ )
+ return { previous }
+ },
+ onError: (err, newData, context) => {
+ // 실패 시 롤백
+ queryClient.setQueryData(userKeys.lists(), context.previous)
+ }
+ })
+ ```
+
+## 결론
+
+처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 하지만, 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
+
+```ts
+onSuccess: () => {
+ queryClient.invalidateQueries({queryKey: userKeys.details()})
+ queryClient.invalidateQueries({queryKey: userKeys.lists()})
+ }
+```
+
+즉, querykey가 체이닝되는 관계성만 명확하게 명시, 기획이 되어 있다면, InvalidateQueries가 성능을 저하하거나 좋지 않은 방식은 아니라 생각이 된다. 이외의 다른 관점으로 InvalidateQueries의 평가 문제 정의가 필요하다고 생각한다.
+
+---
+
## 트러블슈팅
현재 TQ provider의 query 설정 외부 주입할 수 있게 작성을 했다. 이런 방법은 현재로는 매우 오버스팩일 수 있겠다는 생각을 했다.
@@ -27,3 +103,5 @@
### 참고 문서
- [micro frontend](https://jobkaehenry.tistory.com/64)
+- [query-invalidation](https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation)
+- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index 69f9583..331de07 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -28,12 +28,12 @@ export function useUser(id: number){
export function useCreateUser(){
- const QueryClient = useQueryClient()
+ const queryClient = useQueryClient()
return useMutation({
mutationFn: createUser,
onSuccess: () => {
- QueryClient.invalidateQueries({queryKey: userKeys.lists()})
+ queryClient.invalidateQueries({queryKey: userKeys.lists()})
}
})
}
@@ -45,8 +45,8 @@ export function useUpdateUser(){
mutationFn: ({ id, ...payload }: { id: number } & Partial<{ name: string; email: string }>) =>
updateUser(id, payload),
onSuccess: () => {
- // 리스트 캐시만 invalidate - stale cache 문제 재현용
- queryClient.invalidateQueries({queryKey: userKeys.lists()})
+ // details 캐시만 invalidate - stale cache 문제 재현용
+ queryClient.invalidateQueries({queryKey: userKeys.details()})
}
})
}
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
index ad13968..a20beff 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
@@ -18,14 +18,7 @@ function Page() {
const handleUpdate = () => {
if (!name.trim()) return
- updateUser.mutate(
- { id: userId, name },
- {
- onSuccess: () => {
- navigate("/tanstackquery")
- }
- }
- )
+ updateUser.mutate({ id: userId, name })
}
return (
diff --git a/log/workspace/react/ts/src/services/types/user.types.ts b/log/workspace/react/ts/src/services/types/user.types.ts
new file mode 100644
index 0000000..e69de29
From 133deed04e9a0674732d304ccdc084790e1c3977 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:41:52 +0900
Subject: [PATCH 18/19] =?UTF-8?q?docs:=20reference=20=EB=A7=81=ED=81=AC=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 9a05199..47c1f56 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -104,4 +104,5 @@ onSuccess: () => {
- [micro frontend](https://jobkaehenry.tistory.com/64)
- [query-invalidation](https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation)
-- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
\ No newline at end of file
+- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
+- [Mutation 이후 전체 Query를 invalidation 하기](https://yogjin.tistory.com/130)
From 852cc0e98aec045f999cd9a15f450dfff6ecb0ae Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:43:18 +0900
Subject: [PATCH 19/19] =?UTF-8?q?fix:=20=EB=AC=B8=EC=84=9C=20=EC=88=98?=
=?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 47c1f56..8bb1527 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -69,7 +69,7 @@ invalidateQueries를 사용하면 cache를 강제로 refetch를 한다고 이해
## 결론
-처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 하지만, 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
+처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
```ts
onSuccess: () => {