[1] useQuery를 이용하여 puuid 받기

롤 전적 검색 사이트를 만들어 보기로 했다.

 

 

롤 dev에서 api 키를 만든 후 여기서 유저 검색에 쓰일 puuid를 가져오도록 한다.

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { PUIID_URL } from '@/api/url.ts';

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

  const fetchUserPuuid = async () => {
    const res = await axios.get(PUIID_URL);

    return res.data;
  };

  const { data, isLoading, isError } = useQuery({
    queryKey: ['userPuuidQuery'],
    queryFn: fetchUserPuuid,
  });

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

  return (
    <>
      <input onChange={(e) => setUserName(e.target.value)} />
      <button>검색하기</button>
      {data && <p>{data.puuid}</p>}
    </>
  );
}

 

현재까지 만든 query이다.

 

useQuery의 key와 함수를 설정한다. 현재 코드에서는 key를 ['userPuuidQuery'], Fn을 fetchUserPuuid로 설정하였다.

Fn에서는 async와 axios를 이용해 api data를 가져온다.

 

이제 여기서 input에 작성한 이름에 따라서 puuid를 가져오도록 수정하겠다.

버튼 클릭 시 api data 값을 가져오게 해야 한다.

state의 true, false로 처리할 수 있지만

찾아보니 enabled와 refetch()를 통해 시점을 조절할 수 있다.

enabled?

- useQuery가 자동으로 실행되지 않도록 차단함.

- 컴포넌트가 마운트되어도 queryFn이 실행되지 않음.

- 기본값은 true인데, 원할 때만 데이터를 불러오고 싶다면 false로 설정함

refetch()?

- enabled: false로 설정된 useQuery의 쿼리를 수동을 실행하는 함수

- refetch()를 호출하면, queryFn이 실행되어 데이터를 받음.

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { PUIID_URL } from '@/api/url.ts';

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

  const fetchUserPuuid = async () => {
    const res = await axios.get(PUIID_URL(userName));
    return res.data;
  };

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['userPuuidQuery', userName],
    queryFn: fetchUserPuuid,
    enabled: false,
  });

  console.log(data);

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

  const onClickHandle = () => {
    if (userName.trim() === '') {
      return;
    }
    refetch();
  };

  return (
    <>
      {isError && <p>해당 사용자를 찾을 수 없습니다.</p>}
      <input onChange={(e) => setUserName(e.target.value)} />
      <button onClick={onClickHandle}>검색하기</button>
      {data && <p>{data.puuid}</p>}
    </>
  );
}

 

저 코드를 기능에 따라 나눌 것이다.

 

import axios from 'axios';
import { PUIID_URL } from '@/api/url.ts';
import { useQuery } from '@tanstack/react-query';

export default function useFetch(userName) {
  const fetchUserPuuid = async () => {
    const res = await axios.get(PUIID_URL(userName));
    return res.data;
  };

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['userPuuidQuery', userName],
    queryFn: fetchUserPuuid,
    enabled: false,
  });

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

useFetch에서는 axios에서 받은 데이터를 useQuery에서 처리하게 한다.

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

export default function useUserPuuid(userName) {
  const { data, isLoading, isError, refetch } = useFetch(userName);

  const onClickHandle = () => {
    if (userName.trim() === '') {
      return;
    }
    refetch();
  };

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

useUserPuuid에서는 처리한 데이터를 가져온다.

이로 인해 data 안에는

gameName, puuid, tagLine에 대한 정보를 담은 객체가 된다.

 

결과 화면은 다음과 같이 나온다.

다음은 puuid를 이용하여 프로필 아이콘 아이디, 최근 정보 수정일자, 소환사 레벨을 가져올 것 이다.