From 500db3d5aa52b7b5aba4f1a88babe15148aa5b57 Mon Sep 17 00:00:00 2001 From: seongminn Date: Mon, 13 Nov 2023 09:25:16 +0900 Subject: [PATCH] =?UTF-8?q?build:=20react-query=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 4 +- package.json | 3 + src/app/ReactQueryProvider.tsx | 31 +++++++++ src/app/layout.tsx | 10 ++- yarn.lock | 116 ++++++++++++++++++++++++++++++++- 5 files changed, 159 insertions(+), 5 deletions(-) create mode 100644 src/app/ReactQueryProvider.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 44ee85e..99b1fbe 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -6,7 +6,8 @@ "simple-import-sort", "@typescript-eslint", "prettier", - "jsx-a11y" + "jsx-a11y", + "@tanstack/query" ], "extends": [ "next/core-web-vitals", @@ -14,6 +15,7 @@ "plugin:import/typescript", "plugin:jsx-a11y/recommended", "plugin:@typescript-eslint/recommended", + "plugin:@tanstack/eslint-plugin-query/recommended", "prettier" ], "ignorePatterns": [".next/*"], diff --git a/package.json b/package.json index 53cf57d..623acee 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@sentry/nextjs": "^7.73.0", + "@tanstack/react-query": "^5.8.2", + "@tanstack/react-query-devtools": "^5.8.2", "axios": "^1.5.1", "next": "13.5.4", "react": "^18", @@ -26,6 +28,7 @@ "devDependencies": { "@commitlint/cli": "^18.2.0", "@commitlint/config-conventional": "^18.1.0", + "@tanstack/eslint-plugin-query": "^5.6.0", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/ReactQueryProvider.tsx b/src/app/ReactQueryProvider.tsx new file mode 100644 index 0000000..30c5a26 --- /dev/null +++ b/src/app/ReactQueryProvider.tsx @@ -0,0 +1,31 @@ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { ReactNode, useState } from 'react'; + +type ReactQueryProviderProps = { + children: ReactNode; +}; + +export default function ReactQueryProvider({ + children, +}: ReactQueryProviderProps) { + const [queryClient] = useState( + () => + new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + refetchInterval: false, + staleTime: 1000 * 60 * 10, + }, + }, + }), + ); + + return ( + + {children} + + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ef4a228..2b745a1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,6 +6,8 @@ import { Noto_Sans_KR } from 'next/font/google'; import Footer from '@/components/layout/Footer'; import Header from '@/components/layout/Header'; +import ReactQueryProvider from './ReactQueryProvider'; + const inter = Noto_Sans_KR({ subsets: ['latin'], weight: ['400', '500', '700'], @@ -27,9 +29,11 @@ export default function RootLayout({ return ( -
- {children} -