인프런 커뮤니티 질문&답변

import React, { useState, MouseEvent } from "react";
import * as S from "./mypoint.index.styles";
import TapPointLoading from "./mypoint_loading";
import TapPointBuying from "./mypoint_buying";
import TapPointAll from "./mypoint_all";
import TapPointSelling from "./mypoint_selling";

export default function MyPoint(): JSX.Element {
  const [selectedValue, setSelectedValue] = useState<{
    name: string;
    index: number;
  }>({
    name: "전체내역",
    index: 0,
  });

  const MyPageHeadInfoButton = [
    { name: "전체내역", component: <TapPointAll /> },
    { name: "충전내역", component: <TapPointLoading /> },
    { name: "구매내역", component: <TapPointBuying /> },
    { name: "판매내역", component: <TapPointSelling /> },
  ];

  const onClickTap = (
    event: MouseEvent<HTMLDivElement>,
    index: number
  ): void => {
    const newValue = event.currentTarget.id;

    setSelectedValue({
      name: newValue,
      index,
    });
  };

  // 버튼 클릭으로 해당 data 값을 보여주기 위함
  const renderData = (): JSX.Element | undefined => {
    return (
      <S.TableWrap>
        {/* 해당 탭의 배열의 객체 name통해 컴포넌트 가져옴 */}
        {MyPageHeadInfoButton.map((el) => {
          if (el.name === selectedValue.name && el.component) {
            return <div key={el.name}>{el.component}</div>;
          }
          return null;
        })}
      </S.TableWrap>
    );
  };

  return (
    <S.Wrap>
      <S.MyPageHeadWrap>
        <S.MyPageHeadBtn>
          {/* 서브 탭 버튼 */}
          {MyPageHeadInfoButton.map((el, index) => (
            <S.MyPageInfoBtn
              key={el.name}
              id={el.name}
              onClick={(event) => onClickTap(event, index)}
              selected={selectedValue.name === el.name}
            >
              {el.name}
            </S.MyPageInfoBtn>
          ))}
        </S.MyPageHeadBtn>
      </S.MyPageHeadWrap>
      <S.MyPageBodyWrap>
        {/* 해당 탭 data */}
        <div>{renderData()}</div>
      </S.MyPageBodyWrap>
    </S.Wrap>
  );
}

이렇게 탭을 클릭을 해서 해당 컴포넌트가 보이도록 했습니다.

그러면서 각각의 API data도 받아와 cache에 저장을 하도록 해 추가 API 요청이 일어나지 않도록 했는데

여기서 로그아웃을 하고 다른 아이디로 로그인을 하면

이전의 로그인 했던 data가 그대로 남아있어 최신 data를 가져오기 위해 여러가지 방법으로 시도했습니다.

1. 로그아웃 시 useApolloClient를 활용해 cache를 삭제 했습니다. 이렇게 하면 다시 로그인 한 유저의 data를 잘 가져오는데 로그아웃을 하면서 cache data가 삭제되니 다른 API, Board, Markets 등 해당 page의 사용한 query문의 data를 다시 요청하는 문제가 있습니다.

    

2. refetch()로 query문을 선언하면 해당 refetch()를 실행하지 않아도 API 요청이 일어나 refetchQueries를 사용해 data 최신화 하려는데 그렇게 되면 모든 탭을 refetch 해줘야 되는 문제가 있습니다.

각 탭 이동마다 API 요청 나가는게 싫어서 fetchporicy나 refetch()를 사용 하지 않았는데 보통 어떻게 사용을 하나요?

로그인에 의한 data는 탭 이동마다 refetch를 시켜주는게 좋을까요?

그리고 구매, 충전 등 하면 바로 MyPoint에 업데이트 되도록

client.writeQuery / readQeury 나 refetchQueries를 사용했는데 이런 결제 정보 같은거는 refetch로 실시간으로 data를 가져오는게 좋겠죠?

로그인, 로그아웃은 LayoutHeader에서 사용하고 있습니다.