문제 상황 (2023.11.09)
특정 컴포넌트가 렌더링될 때 3개년치의 데이터를 가져와야한다.
query 문의 argument 값으로 year을 넣어야하므로
Promise.all 을 사용해서 요청을 보내면 되겠거니 싶었다.
연속적으로 쿼리를 보낼 수 있도록 보낼 쿼리들을 담는 배열을 만들었다.
const queriesArray = [
{
query: QUERY,
variables: new Date().getFullYear()-3
},
{
query: QUERY,
variables: new Date().getFullYear()-2
},
{
query: QUERY,
variables: new Date().getFullYear()-1
},
]그 후, Promise.all 을 통해서 쿼리를 날렸다.
import { useApolloClient } from "@apollo/client";
const client = useApolloClient();
useEffect(() => {
const getThreeYearData = async () => {
await Promise.all(queriesArray.map((query) => client.query(query))).then(
(results) => {
const resultArr = results.map((el) => {
const { data } = el;
const score = data.getTotalScoreOnKpis.totalScore;
return score;
});
}
);
};
getThreeYearData();
}, []);
)근데!!!!
여기서 문제가 생긴 게
왜!!!! 처음 입장했을 때는 3개년의 데이터를 잘 받아오는데
두번째 입장했을 때는 3개년이 아닌 3개년 중 특정 데이터로 배열이 만들어질까????????
예시)
첫번째 입장 했을때) resultArr = [100, null, 77.5]
두번째 입장 했을때) ResultArr = [100, 100, 100]
두번째 입장했을 때는 캐싱 데이터를 가져오기 때문에 네트워크 통신이 이루어지도 않는데 무엇이 문제일까...
+문제 원인 후보 1
원인을 찾기 위해 useQuery 를 사용해 3년치의 데이터를 각각 날려봐서 콘솔창을 찍어봤다
그렇게 출력된 값을 보는데 실시간을 내 결과 값들이 변하는 것을 볼 수 있었다.
▼ 실제 데이터는 이렇게 안 생겼습니다. 보안 때문에 예시...
2020년 데이터 : undefined
2021년 데이터 : undefined
2022년 데이터 : undefined
--------------------------
2020년 데이터 : 100
2021년 데이터 : undefined
2022년 데이터 : undefined
--------------------------
2020년 데이터 : 100
2021년 데이터 : null
2022년 데이터 : undefined
--------------------------
2020년 데이터 : null
2021년 데이터 : null
2022년 데이터 : undefined
--------------------------
2020년 데이터 : null
2021년 데이터 : null
2022년 데이터 : 77.5
--------------------------
2020년 데이터 : null
2021년 데이터 : 77.5
2022년 데이터 : 77.5
--------------------------
2020년 데이터 : 77.5
2021년 데이터 : 77.5
2022년 데이터 : 77.5이런 식으로 뒤에 나오는 값으로 기존 값들이 스며들기 시작했다...
뭐가 문제일까 생각 중에 데이터를 보니!!!!!!!
2020년, 2021년, 2022년 데이터의 id 값들이 모두 똑같았다!!
그렇다 보니 3개의 데이터를 보냈음에도 불구하고 캐싱은 1개만 된 상황...
그래서 백엔드 개발자 분한테 id 값이 같기 때문에 각 데이터를 구분할 수 있도록 pk 변경해달라고 요청드린 상태이다
내 생각이 맞다면 id가 pk로 바뀌게 된다면 각 년도의 데이터가 구분이 되어 각 데이터가 캐싱될꺼고 이로 인해 데이터가 하나의 값으로 스며들지 않고 구분돼서 출력이 될것이다.
++갑작스러운 해결 방법 1
백엔드 개발자 분이 작업 중인게 있으셔서 API 가 바뀌려면 오래 걸린다고 하신다...
그렇다고 손가락 빨면서 기다릴수는 없으니깐 어떻게 하지... 고민하던 찰나
'그러면 캐싱을 안하면 되지 않을까????' 라는 생각이 문득 들었다!!!!
fetchPolicy 설정을 'no-cache'로 바꾼 뒤 콘솔을 찍어보니
import { useApolloClient } from "@apollo/client";
const client = useApolloClient();
useEffect(() => {
const getThreeYearData = async () => {
await Promise.all(queriesArray.map((query) => client.query({...query, fetchPolicy: "no-cache"}))).then(
(results) => {
const resultArr = results.map((el) => {
const { data } = el;
const score = data.getTotalScoreOnKpis.totalScore;
return score;
});
}
);
};
getThreeYearData();
}, []);
)이게 웬걸 아주 잘 나온다!!!!!!!!!
이제 두가지 선택지가 생겼는데
- 캐싱을 안하고 컴포넌트 재입장을 할 때 마다 서버에 통신을 보낸다.
- 데이터의 id값을 pk로 바꾸어 데이터를 구분 짓는다.
백엔드 개발자 분과 얘기를 해 본 결과
해당 데이터가 실시간으로 바뀌는 것이 아니라 과거의 데이터를 가져오는 것이기 때문에 네트워크 통신을 자주 보내는 것은 비효율적일꺼라는 결론을 도출했다.
때문에 id를 pk로 바꾸되 api가 변경되기 까지 시간이 걸릴꺼 같으니 컴포넌트 구축을 하는 동안은 캐싱을 안하는 것으로 결론을 냈다!!
