build: install and setup TanStack Query

pure-js · Sep 17, 2023 · 8d34250 · 8d34250
1 parent 09c25ff
commit 8d34250
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 2 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,4 +1,5 @@
 extends:
   - 'next/core-web-vitals'
-  - prettier
   - 'plugin:storybook/recommended'
+  - 'plugin:@tanstack/eslint-plugin-query/recommended'
+  - prettier
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,8 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
+import Providers from './providers';
+
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -16,7 +18,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,13 @@
+'use client';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+type ProvidersProps = React.PropsWithChildren<{}>;
+
+export default function Providers({ children }: ProvidersProps) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
diff --git a/next.config.js → next.config.cjs b/next.config.js → next.config.cjs
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "react-hello-world-enterprise-edition",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -11,6 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tanstack/react-query": "4.35.3",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
@@ -30,6 +32,7 @@
     "@storybook/nextjs": "^7.4.1",
     "@storybook/react": "^7.4.1",
     "@storybook/testing-library": "^0.2.0",
+    "@tanstack/eslint-plugin-query": "4.34.1",
     "@types/node": "20.6.0",
     "@vanilla-extract/css": "1.13.0",
     "@vanilla-extract/next-plugin": "2.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs