refactor: migrate from react-query to @tanstack/react-query

kumojin · Apr 17, 2023 · 870ed70 · 870ed70
1 parent 8e66be2
commit 870ed70
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/server/apps/frontend/package.json b/server/apps/frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@formatjs/intl-numberformat": "8.4.0",
+    "@tanstack/react-query": "4.0.5",
     "@types/node": "18.15.11",
     "@types/react": "18.0.35",
     "@types/react-dom": "18.0.11",
@@ -12,8 +13,7 @@
     "react": "18.2.0",
     "react-bootstrap": "2.7.4",
     "react-chartjs-2": "5.2.0",
-    "react-dom": "18.2.0",
-    "@tanstack/react-query": "4.0.5"
+    "react-dom": "18.2.0"
   },
   "scripts": {
     "build": "vite build",

diff --git a/server/apps/frontend/src/App.tsx b/server/apps/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Seller } from './Seller/Seller';
 import './App.css';
 

diff --git a/server/apps/frontend/src/Seller/Seller.hook.ts b/server/apps/frontend/src/Seller/Seller.hook.ts
@@ -1,5 +1,5 @@
+import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 
 const historyFrequency = 10;
 const intervalTime = 5000;
@@ -44,7 +44,9 @@ export const useSeller = (): {
     setSellers((sellersParam: Seller[]) => [...sellersParam, seller]);
   };
 
-  const { data: dataSellers } = useQuery('getSellers', fetchGetSellers, {
+  const { data: dataSellers } = useQuery({
+    queryKey: ['getSellers'],
+    queryFn: fetchGetSellers,
     refetchInterval: intervalTime,
   });
 
@@ -60,13 +62,11 @@ export const useSeller = (): {
 export const useHistory = (): { salesHistory: SalesHistory } => {
   const [salesHistory, setSalesHistory] = useState<SalesHistory>();
 
-  const { data: dataSalesHistory } = useQuery(
-    'getSalesHistory',
-    fetchGetSalesHistory,
-    {
-      refetchInterval: intervalTime,
-    }
-  );
+  const { data: dataSalesHistory } = useQuery({
+    queryKey: ['getSalesHistory'],
+    queryFn: fetchGetSalesHistory,
+    refetchInterval: intervalTime,
+  });
 
   useEffect(() => {
     if (dataSalesHistory) {

diff --git a/server/apps/frontend/src/Seller/SellerForm/SellerFrom.hook.ts b/server/apps/frontend/src/Seller/SellerForm/SellerFrom.hook.ts
@@ -1,5 +1,5 @@
+import { useMutation } from '@tanstack/react-query';
 import React, { FormEvent, RefObject } from 'react';
-import { useMutation } from 'react-query';
 import { AddSellerType, SellerForm } from '../Seller.hook';
 
 export type ErrorFormType = {