Public API로 GraphQL 경험해보기

GraphQL을 간단하게 경험해보기 위해 공용 API에 접근해보기.

 

0. 사용할 공용 GraphQL API

릭앤모티api. 캐릭터목록, 에피소드 등을 반환해준다. 간단해서 사용해보기 좋을 것 같아 선택.

graphql로도 지원하기 때문에 플레이그라운드로 경험해볼 수 있다. query와 mutation이 가능.

Documentation

 

 

1. project 생성

create-react-app으로 생성해줌

 

$ create-react-app test-graphql

 

2. API에 query요청 보내기

 

fetch를 이용해 보내는 방법

method는 POST로, headers에 json타입을 명시, body에 query를 담아 요청을 보냄

한 줄로 처리해야 하는 것 같다.. 가독성이 안 좋음..

 

apollo-fetch를 이용해 보내는 방법

apollo-fetch를 이용하면 쿼리에 동적인 인자값을 담아 보내는 것이 더욱 편리해진다.

나중엔 apollo-client?를 사용해봐야겠다.

$ npm i apollo-fetch

 

variables라는 변수에 인자값을 json형태로 담을 수 있다.. currPage라는 state값을 담아 동적으로 요청한다.

처음에 variables를 잘못 줘서 syntax error가 많이 났는데, 밑에 형식처럼 보내면 된다.

 

 

전체코드▼

import React, {useEffect, useState} from 'react';
import { createApolloFetch } from 'apollo-fetch';
import './App.css';

function App() {
  const [episodes, setEpisodes] = useState([]);
  const [characters, setCharacters] = useState([]);
  const [currPage, setCurrPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const fetchAPI = () => {
    fetch('https://rickandmortyapi.com/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(
        { query: '{ characters{info{count} results{id name gender image}}}' }
      )
    })
    .then(res => res.json())
    .then(data => {
      console.log(data.data.characters.results)
      setCharacters(data.data.characters.results);
    });
  }

  const getEpisodes = async () => {
    setIsLoading(true);
    const uri = 'https://rickandmortyapi.com/graphql';
    const apolloFetch = createApolloFetch({uri: uri});
    const query =  `query Episodes($page: Int){
      episodes(page: $page){
        info {
          count
        }
        results {
          id
          name
          episode
          characters {
            id
            name
            image
          }
        }
      }
    }`;
    const variables = {page: currPage};

    await apolloFetch( { query, variables })
    .then(res => res.data)
    .then(res => {
      setEpisodes(res.episodes.results)
    });
    setIsLoading(false);
  }

  useEffect(() => {
    //fetchAPI();
    getEpisodes();
  },[currPage])

  return (
    <div className="App">
      <h1 className="title">GraphQL test With Public Rick and Morty API</h1>
      {isLoading?<h2>Loading...</h2>:
          <ul>
          {episodes.map((ep) => 
            <li key={ep.id}> 
            <h3>#{ep.episode} | {ep.name}</h3>
            <div>
              <h4>출연 캐릭터</h4>
              {ep.characters.map((character) => 
                <img src={character.image} width="30px"/>
              )}
            </div>
            </li>
          )}
        </ul>
      }
      <button onClick={() => setCurrPage(currPage!==1?currPage-1:1)}>prev</button>
      <button onClick={() => setCurrPage(currPage+1)}>next</button>
    </div>
  );
}

export default App;

 

 

실행 모습