use @tanstack/react-query instead of react-query

cdleveille · Oct 2, 2024 · 82d056e · 82d056e
1 parent cde7f92
commit 82d056e
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 5 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "workbox-strategies": "^7.1.0"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^4.21.0",
@@ -44,7 +45,6 @@
     "nocache": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-query": "^3.39.3",
     "socket.io": "^4.8.0",
     "socket.io-client": "^4.8.0"
   }

diff --git a/src/client/components/Hello.tsx b/src/client/components/Hello.tsx
@@ -1,11 +1,10 @@
-import { useQuery } from "react-query";
-
 import { useApi } from "@hooks";
+import { useQuery } from "@tanstack/react-query";
 
 export const Hello = () => {
 	const { helloToAndFrom } = useApi();
 
-	const { data } = useQuery("hello", () => helloToAndFrom("hello from client!"));
+	const { data } = useQuery({ queryKey: ["hello"], queryFn: () => helloToAndFrom("hello from client!") });
 
 	if (!data) return null;
 

diff --git a/src/client/main.tsx b/src/client/main.tsx
@@ -3,10 +3,10 @@
 import "./style.css";
 
 import { createRoot } from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "react-query";
 
 import { Hello } from "@components";
 import { useConfig } from "@hooks";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const registerServiceWorker = async () => {
 	if (!navigator.serviceWorker) return;