[React] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query) staleTime์ ์ค์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ
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 } });
'๐ช Programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
2024.05.12 -
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์ ์ดํด๋ณด๊ธฐ / Base Query ํ ๋ง๋ค๊ธฐ
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์ ์ดํด๋ณด๊ธฐ / Base Query ํ ๋ง๋ค๊ธฐ
2024.05.12 -
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
2024.05.12 -
[React] svg ํ์ผ โ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
[React] svg ํ์ผ โ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
2024.05.12
๋๊ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.