[2] puuid를 이용하여 소환사 정보 받아오기

이전처럼 url에 받아온 puuid를 넣으면 된다.

여기서 데이터를 받아온다.

import useUserInfo from '@/hooks/fetch/useUserInfo.ts';

type UserInfoProps = {
  puuid: string;
};

export default function UserInfo({ puuid }: UserInfoProps) {
  const { data, isLoading, isError } = useUserInfo(puuid);

  console.log(data);

  if (isLoading) return <p>로딩 중...</p>;

  return (
    <>
      {isError && <p>유저 정보를 불러올 수 없습니다.</p>}
      {data && (
        <>
          <p>{data.profileIconId}</p>
        </>
      )}
    </>
  );
}

 

import useFetch from '@/hooks/fetch/useFetch.ts';
import { SUMMONER_URL } from '@/api/url.ts';

export default function useUserInfo(puuid) {
  const { data, isLoading, isError } = useFetch({
    key: 'userInfoQuery',
    value: puuid,
    url: SUMMONER_URL(puuid),
  });

  return { data, isLoading, isError };
}

 

그런데 문제가 발생했다.

data가 undefined로 뜬다.

원인을 살펴보니 예상되는 문제가

버튼을 클릭하면 onClickHandle에 있는 refetch()가 실행되면서 enabled를 true로 바꾼다.

하지만 useUserInfo에는 refetch()가 없어서 enabled를 true로 바꾸지 못한다.

useUserInfo에도 refetch()를 주어야 한다.

 

refetch()가 enabled를 true로 바꾸므로 enabled를 true로 바꾸는 방법만 생각하면 된다.

import { useState } from 'react';
import useUserPuuid from '@/hooks/fetch/useUserPuuid.ts';
import Search from '@/pages/user/components/Search.tsx';
import UserInfo from '@/pages/user/components/UserInfo.tsx';
import useUserInfo from '@/hooks/fetch/useUserInfo.ts';

export default function User() {
  const [userName, setUserName] = useState<string>('');

  const { data: puuidData, isLoading, isError, onClickHandle } = useUserPuuid(userName);
  const {
    data: userData,
    isLoading: userIsLoading,
    isError: userIsError,
  } = useUserInfo(puuidData?.puuid, !!puuidData?.puuid);

  console.log(puuidData);

  if (isLoading) return <span>...Loading</span>;

  return (
    <>
      <Search setUserName={setUserName} onClickHandle={onClickHandle} />
      <UserInfo userData={userData} userIsLoading={userIsLoading} userIsError={userIsError}/>
      {isError && <p>해당 사용자를 찾을 수 없습니다.</p>}
      {puuidData && (
        <>
          <p>{puuidData.puuid}</p>
          <p>{puuidData.gameName}</p>
          <p>{puuidData.tagLine}</p>
        </>
      )}
    </>
  );
}

useUserInfo는 useUserPuuid에서 얻어온 puuid를 사용하므로 조건 처리를 해주어야 한다.

puuidData?.puuid를 적용해 puuidData가 있을 때만 puuid를 얻어오도록 하였다.

enabled를 true로 바꾸기 위해 puuid가 있을 때 !!를 통해 boolean으로 바꾼다.

puuid가 있으면 true고, 없으면 false가 된다.

import useFetch from '@/hooks/fetch/useFetch.ts';
import { SUMMONER_URL } from '@/api/url.ts';

export default function useUserInfo(puuid, enabled) {
  const { data, isLoading, isError } = useFetch({
    key: 'userInfoQuery',
    value: puuid,
    url: SUMMONER_URL(puuid),
    options: {
      enabled,
    },
  });

  return { data, isLoading, isError };
}

enabled를 바꾸기 위한 방법은 options 객체를 사용하는 것이다.

options에 enabled, staleTime 등을 넣어서 useQuery의 옵션을 바꿀 수 있다.

import axios from 'axios';
import { useQuery } from '@tanstack/react-query';

export default function useFetch({ key, value, url, options }) {
  const fetch = async () => {
    const res = await axios.get(url);
    return res.data;
  };

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: [key, value],
    queryFn: fetch,
    enabled: false,
    ...options,
  });

  return { data, isLoading, isError, refetch };
}

useQuery에 ...options을 넣으면 해당하는 부분을 덮어쓸 수 있다.

 

이를 통해 enabled를 true로 바꾸고 data를 얻을 수 있다.

 

options를 사용하는 방법을 몰라서 어려웠다.

 

결과 화면

 

puuid (Player Unique ID)
PUUID는 각 플레이어 계정에 부여된 고유 식별자로, 78자 길이의 문자열입니다. 이 ID는 리그 오브 레전드뿐만 아니라 다른 라이엇 게임 제목에서도 사용되며, 플레이어가 사용자 이름이나 소환사 이름을 변경하더라도 일관되게 추적할 수 있습니다.

id
이 ID는 특정 지역이나 게임 클라이언트의 소환사 인스턴스에 대한 고유 식별자를 의미합니다. 문맥에 따라 정확한 의미는 달라질 수 있지만, 주로 특정 게임 내 데이터와 관련이 있습니다.

accountId
accountId는 플레이어의 계정에 고유하게 연결된 식별자로, 소환사 이름이 변경되어도 계속 유지됩니다. 이 ID는 주로 계정 관리에 사용됩니다.

summonerId
summonerId는 게임 내 소환사 이름에 구체적으로 연결된 ID입니다. 플레이어가 소환사 이름을 변경하면 이 ID도 변경될 수 있습니다. 주로 게임 클라이언트와 API 호출에서 사용됩니다.