From 2adea9875a27ab708fb9688c64fa83ee6e1bcb0f Mon Sep 17 00:00:00 2001 From: novice1993 Date: Tue, 3 Oct 2023 03:24:27 +0900 Subject: [PATCH] =?UTF-8?q?[Refactor]=20=EB=84=A4=ED=8A=B8=EC=9B=8C?= =?UTF-8?q?=ED=81=AC=20=EC=A4=91=EB=B3=B5=20=EC=9A=94=EC=B2=AD=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 동일한 데이터 계속해서 API 요청하는 것이 아닌, 캐싱된 데이터 활용하도록 수정 (React-query 라이브러리 기능 활용) Issues #122 --- .../components/StockOrderSection/WaitOrderIndicator.tsx | 6 ++++++ client/src/hooks/useGetCash.ts | 5 ++++- client/src/hooks/useGetCompanyList.ts | 5 ++++- client/src/hooks/useGetHoldingStock.ts | 5 ++++- client/src/hooks/useGetMemberId.ts | 8 +++++--- client/src/hooks/useGetStockData.ts | 9 +-------- client/src/hooks/useGetStockOrderRecord.ts | 5 ++++- client/src/hooks/useTradeStock.ts | 1 - 8 files changed, 28 insertions(+), 16 deletions(-) diff --git a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx index aa00defd..34a7096c 100644 --- a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx +++ b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx @@ -2,6 +2,7 @@ import { styled } from "styled-components"; import { toast } from "react-toastify"; import { useState, useEffect } from "react"; import useGetMemberId from "../../hooks/useGetMemberId"; +import { useQueryClient } from "react-query"; import * as Webstomp from "webstomp-client"; import { dummyLogo } from "../../dummy/dummyLogo"; import { volumeUnit } from "../../constant/constant"; @@ -15,6 +16,7 @@ const toastText02: string = " 체결 처리 되었습니다"; const WaitOrderIndicator = () => { const { memberId } = useGetMemberId(); const [waitOrder, setWaitOrder] = useState(null); + const queryClient = useQueryClient(); useEffect(() => { if (memberId) { @@ -40,6 +42,10 @@ const WaitOrderIndicator = () => { useEffect(() => { if (waitOrder !== null) { + queryClient.invalidateQueries("cash"); + queryClient.invalidateQueries("holdingStock"); + queryClient.invalidateQueries("orderRecord"); + const companyId = waitOrder.companyId; const type = waitOrder.orderType; const logo = dummyLogo[companyId - 1]; diff --git a/client/src/hooks/useGetCash.ts b/client/src/hooks/useGetCash.ts index 5af0ddba..85299339 100644 --- a/client/src/hooks/useGetCash.ts +++ b/client/src/hooks/useGetCash.ts @@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080 const useGetCash = () => { const isLogin = useSelector((state: StateProps) => state.login); + const login = isLogin === 1; const { data, isLoading, isError } = useQuery("cash", getCashData, { - enabled: isLogin === 1, + enabled: login, + staleTime: Infinity, + cacheTime: Infinity, }); return { cashData: data, cashLoading: isLoading, cashError: isError }; diff --git a/client/src/hooks/useGetCompanyList.ts b/client/src/hooks/useGetCompanyList.ts index acc66b99..3dfda1fd 100644 --- a/client/src/hooks/useGetCompanyList.ts +++ b/client/src/hooks/useGetCompanyList.ts @@ -2,7 +2,10 @@ import { useQuery } from "react-query"; import axios from "axios"; const useGetCompanyList = () => { - const { data, isLoading, error } = useQuery("companyList", getCompanyList, {}); + const { data, isLoading, error } = useQuery("companyList", getCompanyList, { + staleTime: Infinity, + cacheTime: Infinity, + }); return { companyList: data, compnayListLoading: isLoading, companyListError: error }; }; diff --git a/client/src/hooks/useGetHoldingStock.ts b/client/src/hooks/useGetHoldingStock.ts index d8b62b87..6fe010de 100644 --- a/client/src/hooks/useGetHoldingStock.ts +++ b/client/src/hooks/useGetHoldingStock.ts @@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080 const useGetHoldingStock = () => { const isLogin = useSelector((state: StateProps) => state.login); + const login = isLogin === 1; const { data, isLoading, isError } = useQuery("holdingStock", getHoldingStock, { - enabled: isLogin === 1, + enabled: login, + staleTime: Infinity, + cacheTime: Infinity, }); return { holdingStockData: data, holdingStockLoading: isLoading, holdingStockError: isError }; }; diff --git a/client/src/hooks/useGetMemberId.ts b/client/src/hooks/useGetMemberId.ts index 69fcf637..98d920b6 100644 --- a/client/src/hooks/useGetMemberId.ts +++ b/client/src/hooks/useGetMemberId.ts @@ -6,11 +6,13 @@ import axios from "axios"; const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members"; const useGetMemberId = () => { - const login = useSelector((state: StateProps) => state.login); - const isLogin = login === 1; + const islogin = useSelector((state: StateProps) => state.login); + const login = islogin === 1; const { data, isLoading, isError } = useQuery("memberId", getMemberId, { - enabled: isLogin, + enabled: login, + staleTime: Infinity, + cacheTime: Infinity, }); return { memberId: data, memberIdLoading: isLoading, memberIdError: isError }; diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts index 409e1c12..f2691a5a 100644 --- a/client/src/hooks/useGetStockData.ts +++ b/client/src/hooks/useGetStockData.ts @@ -1,13 +1,12 @@ import { isHoliday } from "@hyunbinseo/holidays-kr"; import { useState, useEffect } from "react"; -import { useQuery, useQueryClient } from "react-query"; +import { useQuery } from "react-query"; import axios from "axios"; const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/"; const useGetStockData = (companyId: number) => { const [autoRefetch, setAutoRefetch] = useState(false); - const queryClient = useQueryClient(); // 1) 주말, 공휴일 여부 체크 const today = new Date(); @@ -53,12 +52,6 @@ const useGetStockData = (companyId: number) => { staleTime: Infinity, cacheTime: Infinity, refetchInterval: autoRefetch && dataRenewalTime ? 60000 * 30 : false, // 정각 혹은 30분에 맞춰서 30분 마다 데이터 리패칭 - onSuccess: () => { - queryClient.invalidateQueries("stockInfo"); - queryClient.invalidateQueries("cash"); - queryClient.invalidateQueries("holdingStock"); - queryClient.invalidateQueries("orderRecord"); - }, }); return { stockPrice: data, stockPriceLoading: isLoading, stockPriceError: error }; diff --git a/client/src/hooks/useGetStockOrderRecord.ts b/client/src/hooks/useGetStockOrderRecord.ts index b3960404..343f2574 100644 --- a/client/src/hooks/useGetStockOrderRecord.ts +++ b/client/src/hooks/useGetStockOrderRecord.ts @@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080 const useGetStockOrderRecord = () => { const isLogin = useSelector((state: StateProps) => state.login); + const login = isLogin === 1; const { data, isLoading, isError } = useQuery("orderRecord", getOrderRecord, { - enabled: isLogin === 1, + enabled: login, + staleTime: Infinity, + cacheTime: Infinity, }); return { orderRecordData: data, orderRecordLoading: isLoading, orderRecordError: isError }; diff --git a/client/src/hooks/useTradeStock.ts b/client/src/hooks/useTradeStock.ts index 715a8e32..db1525e2 100644 --- a/client/src/hooks/useTradeStock.ts +++ b/client/src/hooks/useTradeStock.ts @@ -16,7 +16,6 @@ const useTradeStock = () => { queryClient.invalidateQueries("holdingStock"); queryClient.invalidateQueries("orderRecord"); - // 🟢 중복되는 커스텀훅 -> 일단 기능구현 위해 처리함 queryClient.invalidateQueries("stockHolds"); queryClient.invalidateQueries("money"); },