6-2-1. Poketmon API

src/hooks/usePokemonQuery.ts

/src 디렉토리 하위에 /hooks 를 생성하고, 그 하위에 포켓몬 목록을 가져오는 커스텀 훅(/usePokemonQuery.ts)을 추가합니다.

import axios, { AxiosResponse } from 'axios';
import { useQueries, useQuery } from 'react-query';
import { UseQueryResult } from 'react-query/types/react/types';

import { PokemonResponse } from '../types';

export const pokemonApi = (id?: string) => {
  return axios.get(`https://pokeapi.co/api/v2/pokemon/${id || ''}`, { params: { limit: 151 }});
}

export const usePokemonQueries = (names: string[]): Array<UseQueryResult<AxiosResponse<PokemonResponse>, Error>> => {
  const queries = names.map((name, idx) => ({
    queryKey: ['evolution', `${name}_${idx}`],
    queryFn: () => pokemonApi(name)
  }));

  return useQueries(queries) as Array<UseQueryResult<AxiosResponse<PokemonResponse>, Error>>;
}

const usePokemonQuery = <T>(id?: string): UseQueryResult<AxiosResponse<T>, Error> =>
  useQuery(id ? ['pokemon', id] : 'pokemon', () => pokemonApi(id));

export default usePokemonQuery;

파라미터로 id 를 전달받게 되면 해당 포켓몬의 상세 정보를 가져오고, id

를 전달하지 않으면 포켓몬 목록을 가져옵니다.​

아래와 같이 사용할 수 있습니다.

  const { isLoading, isError, data } = usePokemonQuery<ListResponse>(); // List
  const { isLoading, isError, data } = usePokemonQuery<PokemonResponse>(id); // Detail

이전 시간에 만든 PoketmonList 컴포넌트에 usePokemonQuery 을 연동해보겠습니다.

usePokemonQuery hook 을 상단에 선언하고 쿼리의 결과물을 ListItem 으로 이터레이션 해주면 됩니다.

쿼리가 로딩 상태일 경우엔 아래의 gif 이미지로 대체합니다.

Loading...

import React from 'react';
import styled from '@emotion/styled/macro';

import { ListResponse } from '../types';
import usePokemonQuery from '../hooks/usePokemonQuery';

const Base = styled.div`
  margin-top: 24px;
`;

const LoadingWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 180px);
`;

const Loading = styled.img``;

const ListItem = styled.li`
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  box-shadow: 6px 4px 14px 5px rgba(0,0,0,0.21);
  border-radius: 12px;
  & + & {
    margin-top: 18px;
  }
`;

const List = styled.ul`
  margin: 0;
  padding: 0;
 `;

const Image = styled.img``;

const Name = styled.p`
  margin: 0;
  padding: 0 0 0 12px;
  flex: 1 1 100%;
  color: #374151;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: bold;
`;

const Index = styled.p`
  position: absolute;
  margin: 0;
  padding: 0;
  right: 16px;
  bottom: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #D1D5DB;
`;

const getImageUrl = (pokemonIndex: number): string =>
  `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonIndex}.png`

const formatNumbering = (pokemonIndex: number | string): string =>
  `#${(typeof pokemonIndex === 'number' ? String(pokemonIndex) : pokemonIndex).padStart(3, '0')}`

const PokemonList: React.FC = () => {
  const { isLoading, isError, data } = usePokemonQuery<ListResponse>();
  const { push } = useHistory();

  return (
    <Base>
      {
        isLoading || isError ? (
          <LoadingWrapper>
            <Loading src="/loading.gif" alt="loading" />
          </LoadingWrapper>
        ) : (
          <List>
            {
              data?.data.results.map((pokemon, idx) => (
                <ListItem key={pokemon.name}>
                  <Image src={getImageUrl(idx + 1)} alt={pokemon.name} />
                  <Name>{pokemon.name}</Name>
                  <Index>{formatNumbering(idx + 1)}</Index>
                </ListItem>
              ))
            }
          </List>
        )
      }
    </Base>
  )
}

export default PokemonList;