GraphQL 파헤치기2 - GraphQL client처리

안녕하세요 휴몬랩 프론트엔드 개발자 진(JIN)입니다. 글이 좀 늦어졌지만 GraphQL을 좀 더 알아보도록 하겠습니다! GraphQL을 사용하는 이유! RESTful 하던 기존의 HTTP 통신 방법과의 차이를 알아봤습니다. 그렇다면 이번에는 간단한 통신 방법을 알아보겠습니다. 이번에는 apollo라는 플랫폼을 사용하겠습니다. apollo는 GraphQL과 호환되는 상태 관리 플랫폼이고 GraphQL로 만들어진 API를 호출하기 위해 사용되는 라이브러리라고 보시면 좋겠습니다.

 

프론트엔드 개발자로 들어간 JIN... 회사에서 GraphQL로 만들어진 API 명세서가 있었습니다. 백엔드 개발자 분이 피 땀 흘려 만든 API에서 데이터를 받아 사용자에게 유용한 interactive 한 react 웹을 만들어야 할 때가 왔습니다!

(참고로, GraphQL API를 호출할 때, apollo client같은 클라이언트가 필수는 아니지만! 지원도 잘 돼있고 생산성 부분에서 적극 활용하고 있습니다!)

 

패키지 설치

npm i apollo-boost graphql react-apollo

기본적으로 apollo client 패키지를 사용하기 위한 패키지를 설치해 줍니다.

 

apollo 공식 도큐먼트에는 apollo-boost를 이용해 빠르고 손쉽게 개발을 하도록 만든 패키지로 적극 활용하길 권장하고 있습니다. apollo-boost를 이용해 빠른 서비스를 개발하도록 노력하고 있다고 합니다. 하지만, 캐시나 여러 추가적인 작업을 할 경우는 apollo-boost로 해결 못할 경우가 생길 수 도 있습니다. 그런 경우는 apollo client의 다른 패키지를 도큐먼트를 참고해 처리해주면 되겠습니다! 우리는 react를 이용하기 때문에 reat-apollo를 이용해 React웹앱에 apollo client를 연결해줘야 합니다.

 

apollo client 생성

apollo client를 먼저 생성해야 합니다. GraphQL은 RESTful API와 다르게 하나의 엔드포인트가 필요하다고 했습니다. 엔드 포인트를 설정하는데 uri를 직접 전달하지 않으면 /graphql이 기본으로 설정됩니다.

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});

apollo-boost라는 종합 선물세트 같은 패키지에서 ApolloClient를 import 해옵니다. 그리고 api uri를 생성자 함수의 인자로 넘기면 기본적인 준비는 되었습니다.

 

이제 데이터를 패칭 할 준비가 되었습니다. React에 apollo client를 연동해봅시다!

 

React - Apollo client 연동

다음, 위에서 생성한 ApolloClient 객체를 우리가 만들 React웹 앱에 연결해줄 시간입니다. 프로젝트가 create-react-app으로 생성되었다면 App.js에서 작업을 해주면 되겠습니다.

 

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/react-hooks';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

 

react-apollo 패키지에서 ApolloProvider를 import 해서 컴포넌트의 root에서 감싸줍니다.

여기서 넘겨줄 부분이 client prop에 위에서 생성한 ApolloClient객체인 client를 넘겨주면 React 웹 앱에서 안의 모든 컴포넌트에서 GraphQL API를 연동할 수 있게 됩니다:)

 

API에 Data 요청

이제 연동은 끝! 실제 데이터를 요청해보겠습니다. 더 모던한 React웹 앱을 위해서 Hooks를 많이 사용하고 있습니다. apollo에서도 @apollo/react-hooks 패키지를 이용해 hook을 사용할 수 있습니다.

npm i @apollo/react-hooks

 

설치가 완료되었다면 데이터를 받아와 바인딩 후 UI를 구현해보겠습니다.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const EXCHANGE_RATES = gql`
  {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

apollo-bhoost의 gql이라는 템플레이트 태그를 이용해 자바스크립트 스트링을 GraphQL 구문으로 바꿔준 후 useQuery라는 훅을 이용해 쿼리를 날릴 수 있습니다. 그리고 각각 loading, error, data를 차례로 선언했습니다.

loading은 GraphQL 서버로부터 데이터를 받아올 때 걸리는 시간입니다. 보통 ProgressBar나 여러 애니메이션을 넣어줍니다. loading을 빼고 data만 받아온다면 데이터를 받아오기 전에 렌더링 되어 에러가 발생할 수 있습니다!

error는 API 호출이 실패했을 경우에 오류 데이터가 할당됩니다.

마지막 data 파라미터는 API 호출이 성공한 경우 정상적으로 데이터를 할당되어 받아올 수 있습니다.

 

 

[참고]

apollo 공식 도큐먼트