setup queryclient and provider

Author: wpcodevo

Makefile

@@ -0,0 +1,8 @@
+create-project:
+	pnpm create next-app nextjs14-react-query
+
+install-dependencies:
+	pnpm add @tanstack/react-query
+	pnpm add @tanstack/query-core
+	pnpm add -D @tanstack/eslint-plugin-query
+	pnpm add -D @tanstack/react-query-devtools

package.json

@@ -9,19 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/query-core": "^5.17.10",
+    "@tanstack/react-query": "^5.17.10",
+    "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tanstack/eslint-plugin-query": "^5.17.7",
+    "@tanstack/react-query-devtools": "^5.17.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import getQueryClient from '@/utils/getQueryClient';
+
+function Providers({ children }: React.PropsWithChildren) {
+  const client = getQueryClient();
+
+  return (
+    <QueryClientProvider client={client}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default Providers;

providers/ReactQueryProvider.tsx

@@ -0,0 +1,5 @@
+import { QueryClient } from '@tanstack/query-core';
+import { cache } from 'react';
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;