chore: migrate tanstack query to v5

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@tanstack/react-query": "^5.56.0",
     "@tanstack/react-table": "^8.20.1",
     "@tippyjs/react": "^4.2.6",
     "@types/node": "20.5.0",
@@ -57,7 +58,6 @@
     "react-hook-form": "^7.49.2",
     "react-i18next": "^15.0.1",
     "react-modal": "^3.16.1",
-    "react-query": "^3.39.3",
     "recharts": "2.13.0-alpha.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",

src/app/(dashboard)/invoice/(index)/invoice-query.ts

@@ -1,5 +1,5 @@
 import { httpClient } from "@/lib/http-client";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { GetInvoiceById } from "./invoice-service";
 
 export function useGetInvoiceById(id: string | null) {

src/app/(dashboard)/invoice/client/client-query.ts

@@ -1,6 +1,6 @@
 import { httpClient } from "@/lib/http-client";
 import { Client } from "@prisma/client";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { GetClients } from "./client-service";
 
 export function useGetClientById(id?: string | null) {
@@ -12,7 +12,9 @@ export function useGetClientById(id?: string | null) {
 }
 
 export function useGetClients() {
-  return useQuery(useGetClients.name, () =>
-    httpClient.get<GetClients>("/invoice/client").then((res) => res.data),
-  );
+  return useQuery({
+    queryKey: [useGetClients.name],
+    queryFn: () =>
+      httpClient.get<GetClients>("/invoice/client").then((res) => res.data),
+  });
 }

src/app/(dashboard)/invoice/payment-mode/payment-mode-query.ts

@@ -1,5 +1,5 @@
 import { httpClient } from "@/lib/http-client";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import type {
   GetPaymentModeById,
   GetPaymentsMode,

src/app/(dashboard)/invoice/provider/provider-query.ts

@@ -1,5 +1,5 @@
 import { httpClient } from "@/lib/http-client";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import type { GetProviderById, GetProviders } from "./provider-service";
 
 export function useGetProviderById(id?: string) {
@@ -14,7 +14,9 @@ export function useGetProviderById(id?: string) {
 }
 
 export function useGetProviders() {
-  return useQuery([useGetProviders.name], () =>
-    httpClient.get<GetProviders>("/invoice/provider").then((res) => res.data),
-  );
+  return useQuery({
+    queryKey: [useGetProviders.name],
+    queryFn: () =>
+      httpClient.get<GetProviders>("/invoice/provider").then((res) => res.data),
+  });
 }

src/app/(dashboard)/operation/components/operation-action.tsx

@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/button";
 import { MoreHorizontalIcon } from "lucide-react";
 import { useState } from "react";
 import { OperationSave } from "./operation-save";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { useGetOperations } from "../operation-query";
 import { ModalDelete } from "@/components/modal-delete";
 import { deleteOperationAction } from "../operation-action";

src/app/(dashboard)/operation/operation-query.ts

@@ -1,16 +1,19 @@
 import { httpClient } from "@/lib/http-client";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import type { GetOperationQuery } from "./operation-dto";
 import type { GetOperationById, GetOperations } from "./operation-service";
 
 export function useGetOperations({ q, distinct }: GetOperationQuery = {}) {
-  return useQuery([useGetOperations.name, q, distinct], ({ queryKey }) => {
-    const [_, q, distinct] = queryKey;
-    return httpClient
-      .get<GetOperations>(`/operations`, {
-        params: { q, distinct },
-      })
-      .then((resp) => resp.data);
+  return useQuery({
+    queryKey: [useGetOperations.name, q, distinct],
+    queryFn: ({ queryKey }) => {
+      const [_, q, distinct] = queryKey;
+      return httpClient
+        .get<GetOperations>(`/operations`, {
+          params: { q, distinct },
+        })
+        .then((resp) => resp.data);
+    },
   });
 }