๋ฐ˜์‘ํ˜•

React Query์—์„œ staleTime์€ ์ฟผ๋ฆฌ์˜ ๋งŒ๋ฃŒ ์‹œ๊ฐ„์„ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. staleTime์ด ์ง€๋‚˜๋ฉด ์ฟผ๋ฆฌ์˜ ์บ์‹œ ๋ฐ์ดํ„ฐ๋ฅผ ์˜ค๋ž˜๋œ ๋ฐ์ดํ„ฐ๋กœ ๊ฐ„์ฃผํ•˜๊ณ  re-fetching์„ ์‹œ๋„ํ•œ๋‹ค. React Query์—์„  ๊ธฐ๋ณธ์ ์œผ๋กœ ์บ์‹œ ๋ฐ์ดํ„ฐ ์ž์ฒด๋ฅผ stale ๋ฐ์ดํ„ฐ๋กœ ์ทจ๊ธ‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— staleTime์˜ ๊ธฐ๋ณธ๊ฐ’์€ 0์ด๋‹ค. ํ•˜์ง€๋งŒ ๋ณ€๊ฒฝ ์ฃผ๊ธฐ๊ฐ€ ๋А๋ฆฐ ๋ฐ์ดํ„ฐ๋Š” ์„œ๋ฒ„์— ๋นˆ๋ฒˆํ•˜๊ฒŒ ์š”์ฒญํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— staleTime์„ ์ ์ ˆํ•˜๊ฒŒ ์กฐ์ ˆํ•ด์ฃผ๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค.

 

๐Ÿ’ก ์ค‘๋ณต ํ˜ธ์ถœ์„ ์ค„์ด๊ธฐ ์œ„ํ•œ staleTime์€ ์ตœ์†Œ 20์ดˆ ์ •๋„๊ฐ€ ์ ๋‹นํ•˜๋‹ค โ€” via tkdodo

 

1. ๊ฐœ๋ณ„ ์ฟผ๋ฆฌ ์ธ์Šคํ„ด์Šค์— staleTime ์„ค์ •


// v4
useQuery('users', getUsers, { staleTime: 1000 * 60 });
// v5
useQuery({ queryKey: 'users', queryFn: getUsers, staleTime: 1000 * 60 });

 

2. ํŠน์ • ์ฟผ๋ฆฌํ‚ค์— ๋Œ€ํ•œ staleTime ์„ค์ •


queryClient.setQueryDefaults ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด ํŠน์ • ์ฟผ๋ฆฌํ‚ค์—๋งŒ ์ ์šฉํ•˜๋Š” staleTime์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

const queryClient = useQueryClient();
queryClient.setQueryDefaults('users', { staleTime: 1000 * 60 });
// users ์ฟผ๋ฆฌํ‚ค์— ๋Œ€ํ•ด staleTime์„ 1๋ถ„์œผ๋กœ ์„ค์ •

 

3. ์ „์—ญ staleTime ์„ค์ •


QueryClient์˜ defaultOptions์„ ํ†ตํ•ด ํ•ด๋‹น queryClient๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์ฟผ๋ฆฌ์˜ ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

// ๋ฐฉ๋ฒ• 1
const queryClient = new QueryClient({
defaultOptions: { queries: { staleTime: 1000 * 60 } },
// ๋ชจ๋“  ์ฟผ๋ฆฌ ์ธ์Šคํ„ด์Šค์˜ staleTime์„ 1๋ถ„์œผ๋กœ ์„ค์ •
});
// ๋ฐฉ๋ฒ• 2 (์ด์ „ defaultOptions๋ฅผ ๋ฎ์–ด์”€)
const queryClient = useQueryClient();
queryClient.setDefaultOptions({ queries: { staleTime: 1000 * 60 } });
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€

๋Œ“๊ธ€์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.