From 64b0808b48f46842e582e34534db0dd1fa320b45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= Date: Wed, 10 Jan 2024 22:46:17 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Config:=20tanstack-query=20v5=EB=A1=9C=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=B0=8F=20=EC=9D=98?= =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +-- yarn.lock | 84 +++++++++++++++++----------------------------------- 2 files changed, 29 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index b9b77495..e674cd09 100644 --- 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/yarn.lock b/yarn.lock index 3094257e..55cf929c 100644 --- 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/query-core@5.17.7": + 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-core@4.29.11": - 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-devtools@5.17.7": + 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/react@17.0.2": + 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/react@18.0.28": @@ -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" -remove-accents@0.4.2: - 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 @@ stylis@4.2.0: 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== From d44c154e0adc7c1dc8a419912dcea8e67a3086b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= Date: Fri, 12 Jan 2024 22:11:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Refactor:=20useQuery=20=EC=98=B5=EC=85=98?= =?UTF-8?q?=20=EA=B0=9D=EC=B2=B4=20=ED=98=95=EC=8B=9D=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Bracket/BracketContents.tsx | 13 ++++--------- .../Modal/ModifyChannel/ModifyChannel.tsx | 5 +++-- src/components/ModifyChannel/AssignBracket.tsx | 5 +++-- src/components/Sidebar/BoardBar/BoardBar.tsx | 7 ++++--- src/components/Sidebar/BoardBar/BoardBody.tsx | 7 ++++--- src/pages/_app.tsx | 12 ++++++------ src/pages/contents/[channelLink]/main.tsx | 11 ++++------- src/pages/index.tsx | 1 + 8 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/components/Bracket/BracketContents.tsx b/src/components/Bracket/BracketContents.tsx index f1fa8efd..2fda3e53 100644 --- 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 index 722664c2..98b30407 100644 --- 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('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 index 501fc30a..affd745c 100644 --- 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(['bracketSetting'], () => { - return fetchAllBracket(router.query.channelLink as string); + const { data, isSuccess } = useQuery({ + 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 index 2e38f561..51ce75bd 100644 --- 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 index c64fdc14..e326459b 100644 --- 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([]); 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/pages/_app.tsx b/src/pages/_app.tsx index 7f63946b..e05b084c 100644 --- 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 ( - + @@ -46,7 +46,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { - + ); @@ -54,7 +54,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( - + @@ -70,7 +70,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { - + ); } diff --git a/src/pages/contents/[channelLink]/main.tsx b/src/pages/contents/[channelLink]/main.tsx index 8338bbcd..58769fe8 100644 --- 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( - ['getMainContents', channelLink], - () => { - return fetchData(channelLink as string); - }, - { staleTime: 0, cacheTime: 0 }, - ); + const { data, isSuccess, refetch } = useQuery({ + 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 index bdb8c569..5869e5b2 100644 --- 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(() => { From cc2ab30c1e06b26a7e6faef458c8b194d24a2d64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?= =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= Date: Sun, 14 Jan 2024 15:15:12 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Fix:=20query=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout.tsx | 2 +- src/contexts/ProfileContext.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 77e5d5cc..f52b745e 100644 --- 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 ( <> diff --git a/src/contexts/ProfileContext.tsx b/src/contexts/ProfileContext.tsx index 8de151af..0eaae2e6 100644 --- 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>; - status: 'loading' | 'error' | 'success'; + status: 'pending' | 'error' | 'success'; isInitialLoading: boolean; refetchProfile: () => Promise; }