Merge pull request #277 from TheUpperPart/Config/#275

Config: tanstack-query v5로 변경
TheUpperPart · Jan 14, 2024 · 34f3d3b · 34f3d3b
2 parents 9ecf8b3 + cc2ab30
commit 34f3d3b
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -26,8 +26,7 @@
     "@hello-pangea/dnd": "^16.3.0",
     "@react-icons/all-files": "^4.1.0",
     "@stomp/stompjs": "^7.0.0",
-    "@tanstack/react-query": "^4.29.12",
-    "@tanstack/react-query-devtools": "^4.29.12",
+    "@tanstack/react-query": "^5.17.7",
     "axios": "^1.4.0",
     "cookie": "^0.5.0",
     "eslint-plugin-testing-library": "^5.11.0",
@@ -38,6 +37,7 @@
     "react-markdown": "^8.0.7"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.17.7",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",

diff --git a/src/components/Bracket/BracketContents.tsx b/src/components/Bracket/BracketContents.tsx
@@ -21,15 +21,10 @@ const fetchBracket = async (channelLink: string, curRound: number) => {
 
 const BracketContents = (props: Props) => {
   const router = useRouter();
-
-  const { data, isSuccess, isError, isLoading } = useQuery(
-    ['bracketContents', props.curRound, router.query.channelLink],
-    () => {
-      if (typeof router.query.channelLink === 'string') {
-        return fetchBracket(router.query.channelLink, props.curRound);
-      }
-    },
-  );
+  const { data, isSuccess, isError, isLoading } = useQuery({
+    queryKey: ['bracketContents', props.curRound, router.query.channelLink],
+    queryFn: () => fetchBracket(router.query.channelLink as string, props.curRound),
+  });
 
   const moveToCheckIn = (matchId: number) => {
     router.push(`/contents/${router.query.channelLink as string}/checkIn/${matchId}`);

diff --git a/src/components/Modal/ModifyChannel/ModifyChannel.tsx b/src/components/Modal/ModifyChannel/ModifyChannel.tsx
@@ -21,8 +21,9 @@ const fetchChannelInfo = async (channelLink: string) => {
 const ModifyChannel = ({ channelLink, onClose }: ModifyChannelProps) => {
   const [selectedMenu, setSelectedMenu] = useState<MenuList>('basicInfo');
 
-  const { data, isSuccess, isError, isLoading } = useQuery(['channelInfo', channelLink], () => {
-    return fetchChannelInfo(channelLink);
+  const { data, isSuccess, isError, isLoading } = useQuery({
+    queryKey: ['channelInfo', channelLink],
+    queryFn: () => fetchChannelInfo(channelLink),
   });
 
   return (

diff --git a/src/components/ModifyChannel/AssignBracket.tsx b/src/components/ModifyChannel/AssignBracket.tsx
@@ -19,8 +19,9 @@ const fetchAllBracket = async (channelLink: string) => {
 const AssignBracket = () => {
   const router = useRouter();
 
-  const { data, isSuccess } = useQuery<BracketHeader>(['bracketSetting'], () => {
-    return fetchAllBracket(router.query.channelLink as string);
+  const { data, isSuccess } = useQuery<BracketHeader>({
+    queryKey: ['bracketSetting'],
+    queryFn: () => fetchAllBracket(router.query.channelLink as string),
   });
 
   const fetchSetBracket = async (round: number) => {

diff --git a/src/components/Sidebar/BoardBar/BoardBar.tsx b/src/components/Sidebar/BoardBar/BoardBar.tsx
@@ -17,9 +17,10 @@ const fetchData = async (channelLink: string) => {
 };
 
 const BoardBar = ({ channelLink }: { channelLink: string }) => {
-  const { data } = useQuery(['getBoard', channelLink], () => fetchData(channelLink), {
-    staleTime: Infinity,
-    cacheTime: Infinity,
+  const { data } = useQuery({
+    queryKey: ['getBoard', channelLink],
+    queryFn: () => fetchData(channelLink),
+    gcTime: Infinity,
     enabled: channelLink !== 'main',
   });
 

diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx
@@ -55,9 +55,10 @@ const BoardBody = ({ channelLink }: Props) => {
   const [boards, setBoards] = useState<Channels[]>([]);
   const router = useRouter();
 
-  const { data, isSuccess } = useQuery(['getBoardLists', channelLink], () =>
-    fetchData(channelLink),
-  );
+  const { data, isSuccess } = useQuery({
+    queryKey: ['getBoardLists', channelLink],
+    queryFn: () => fetchData(channelLink),
+  });
 
   const { lastVisitedBoardIdLists, handleBoard } = useLastVisitedBoardLists();
   const { channelPermission } = useChannels();

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -37,7 +37,7 @@ const Layout = ({ children }: PropsWithChildren) => {
   }, [channels]);
 
   // 요청했을 때만
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <>
         <CommonLayout>

diff --git a/src/contexts/ProfileContext.tsx b/src/contexts/ProfileContext.tsx
@@ -5,7 +5,7 @@ import { Profile } from '@type/profile';
 interface ProfileState {
   profile: Profile | null;
   setProfile: React.Dispatch<React.SetStateAction<Profile | null>>;
-  status: 'loading' | 'error' | 'success';
+  status: 'pending' | 'error' | 'success';
   isInitialLoading: boolean;
   refetchProfile: () => Promise<void>;
 }

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
 import type { AppProps } from 'next/app';
 import { useState } from 'react';
-import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import LastVisitedBoardListsProvider from '@components/providers/LastVisitedBoardListsProvider';
@@ -12,7 +12,7 @@ import ModalsProvider from '@components/providers/ModalProvider';
 import ShowModals from '@components/Modal/showModals';
 import MSWComponent from '@components/MSWComponent/MSWComponent';
 
-const isDevelopmentMode = process.env.NODE_ENV === 'development';
+const isDevelopmentMode = false;
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(
@@ -30,7 +30,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     return (
       <MSWComponent>
         <QueryClientProvider client={queryClient}>
-          <Hydrate state={pageProps.dehydratedState}>
+          <HydrationBoundary state={pageProps.dehydratedState}>
             <ReactQueryDevtools initialIsOpen={false} />
             <ChannelsProvider>
               <ProfileProvider>
@@ -46,15 +46,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
                 </LastVisitedBoardListsProvider>
               </ProfileProvider>
             </ChannelsProvider>
-          </Hydrate>
+          </HydrationBoundary>
         </QueryClientProvider>
       </MSWComponent>
     );
   }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Hydrate state={pageProps.dehydratedState}>
+      <HydrationBoundary state={pageProps.dehydratedState}>
         <ReactQueryDevtools initialIsOpen={false} />
         <ChannelsProvider>
           <ProfileProvider>
@@ -70,7 +70,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
             </LastVisitedBoardListsProvider>
           </ProfileProvider>
         </ChannelsProvider>
-      </Hydrate>
+      </HydrationBoundary>
     </QueryClientProvider>
   );
 }
diff --git a/src/pages/contents/[channelLink]/main.tsx b/src/pages/contents/[channelLink]/main.tsx
@@ -36,13 +36,10 @@ const Main = () => {
   const { channelPermission } = useChannels();
   const channelLink = router.query.channelLink;
 
-  const { data, isSuccess, refetch } = useQuery<MainContent | undefined>(
-    ['getMainContents', channelLink],
-    () => {
-      return fetchData(channelLink as string);
-    },
-    { staleTime: 0, cacheTime: 0 },
-  );
+  const { data, isSuccess, refetch } = useQuery<MainContent | undefined>({
+    queryKey: ['getMainContents', channelLink],
+    queryFn: () => fetchData(channelLink as string),
+  });
 
   useEffect(() => {
     if (isSuccess && data) setMainContents(data);

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -22,6 +22,7 @@ export default function Home() {
     queryKey: ['notice', router.query.selected as string],
     queryFn: () => fetchNotice(router.query.selected as string),
     enabled: selectedBoard !== '',
+    staleTime: 60 * 60 * 24,
   });
 
   useEffect(() => {

diff --git a/yarn.lock b/yarn.lock
@@ -863,34 +863,29 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/match-sorter-utils@^8.7.0":
-  version "8.8.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
-  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
-  dependencies:
-    remove-accents "0.4.2"
+"@tanstack/[email protected]":
+  version "5.17.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.17.7.tgz#d1e41d661a560d2cd370fcf0933ea3a6e835c3b4"
+  integrity sha512-PFL+z9w9U9Pvg5KjJRA9X5q5hlNoRVDNNgSEcKcZxES3z0rbWnUj2cMYIqeeoUrMo5YGCTNoJHU6ETTXpZIoPA==
 
-"@tanstack/query-[email protected]":
-  version "4.29.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.11.tgz#fa338f7d6897c6be5de6d8dabd603d9b78ee48c7"
-  integrity sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==
+"@tanstack/query-[email protected]":
+  version "5.17.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.17.7.tgz#9f9e44a32d08ecd5c9fe3ede62a114d6d6e240d5"
+  integrity sha512-TfgvOqza5K7Sk6slxqkRIvXlEJoUoPSsGGwpuYSrpqgSwLSSvPPpZhq7hv7hcY5IvRoTNGoq6+MT01C/jILqoQ==
 
-"@tanstack/react-query-devtools@^4.29.12":
-  version "4.29.12"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.29.12.tgz#a5180bbd850dde6c81f87296acba1ac94302f936"
-  integrity sha512-ug4YGQhMhh6QI8/sWJhjXxuvdeehxf1cyxpTifGMH5qreQ5ECHT6vzqG/aKvADQDzqLBGrF0q4wTDnRRYvvtrA==
+"@tanstack/react-query-devtools@^5.17.7":
+  version "5.17.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.17.7.tgz#f265e1742f39ffc4b45df7a9531898911143961b"
+  integrity sha512-IewfiEqM6zmThv9Hq+e0HjMnxGhlrKkzuQ8iXJnRl8bQXIFiNA8NSb5nVYPpPUmsHsPCNOalJ0Exh4gE4sGUug==
   dependencies:
-    "@tanstack/match-sorter-utils" "^8.7.0"
-    superjson "^1.10.0"
-    use-sync-external-store "^1.2.0"
+    "@tanstack/query-devtools" "5.17.7"
 
-"@tanstack/react-query@^4.29.12":
-  version "4.29.12"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.12.tgz#de111cf1d6c389b86acacfaf972302914cfa1208"
-  integrity sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==
+"@tanstack/react-query@^5.17.7":
+  version "5.17.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.17.7.tgz#e56495996caf65043a404707cafd16327d4a894e"
+  integrity sha512-JqmnJLwsJxvWXQEcaSvJn3ZpZxVqi39Xz/QoJlH8HU57idTKi9CYbcI1aNryJA0Br69F0QpN2T3bg1YPona2wQ==
   dependencies:
-    "@tanstack/query-core" "4.29.11"
-    use-sync-external-store "^1.2.0"
+    "@tanstack/query-core" "5.17.7"
 
 "@testing-library/dom@^9.0.0":
   version "9.3.0"
@@ -1095,10 +1090,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@^18.0.0":
-  version "18.2.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.4.tgz#13f25bfbf4e404d26f62ac6e406591451acba9e0"
-  integrity sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==
+"@types/react-dom@17.0.2", "@types/react-dom@^18.0.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
+  integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
   dependencies:
     "@types/react" "*"
 
@@ -1109,13 +1104,12 @@
   dependencies:
     react-icons "*"
 
-"@types/react@*":
-  version "18.2.8"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.8.tgz#a77dcffe4e9af148ca4aa8000c51a1e8ed99e2c8"
-  integrity sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==
+"@types/react@*", "@types/[email protected]":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
+  integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/[email protected]":
@@ -1841,13 +1835,6 @@ cookie@^0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-copy-anything@^3.0.2:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
-  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
-  dependencies:
-    is-what "^4.1.8"
-
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -2996,11 +2983,6 @@ is-weakset@^2.0.1:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-is-what@^4.1.8:
-  version "4.1.15"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
-  integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -4566,11 +4548,6 @@ remark-rehype@^10.0.0:
     mdast-util-to-hast "^12.1.0"
     unified "^10.0.0"
 
-[email protected]:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -4936,13 +4913,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-superjson@^1.10.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.3.tgz#383aacfd795c6eef24c383c70154c6cbbcbfb31a"
-  integrity sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==
-  dependencies:
-    copy-anything "^3.0.2"
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -5199,7 +5169,7 @@ use-memo-one@^1.1.3:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==