Eojin Han

Apollo 설치 (with React)패키지 설명 클라이언트 설정 initialize ApolloClient 순수 자바스크립트로 쿼리 보내보기 React와 함께 사용하기 useQuery로 데이터 fetch Apollo Client Devtools

Apollo

Apollo:

프론트엔드 클라이언트 라이브러리(Apollo Client)와

백엔드 서버 프레임워크(Apollo Server)를 포함하는 GraphQL 플랫폼

설치 (with React)

공식 문서 : https://www.apollographql.com/docs/react/get-started/


$ npm install @apollo/client graphql

or

$ yarn add @apollo/client graphql

패키지 설명

@apollo/client : Apollo Client 셋업을 위한 모든 것을 가지고 있는 패키지. in-memory cache, local state management, error handling, React-based view layer를 포함한다.

graphql: GraphQL 쿼리들을 파싱하는 로직을 제공하는 패키지

클라이언트 설정

공식 문서 : https://www.apollographql.com/docs/react/get-started/#2-initialize-apolloclient

initialize ApolloClient

import 후에 uri와 cache옵션을 전달하면 데이터를 fetching 하기 위한 준비는 끝난다.


import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";


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

순수 자바스크립트로 쿼리 보내보기

React 프레임워크를 사용하기에 앞서서 순수한 자바스크립트로 쿼리를 보내보는 예시를 먼저 보자.


// const client = ...

client
  .query({
    query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));

콘솔에서 위 코드를 실행해보면 쿼리의 결과가 data 프롭 하위에 rates가 딸려서 오는 것을 확인할 수 있고, 이외에도 loading, networkStatus와 같은 다른 프롭들도 같이 볼 수 있다.

이와 같이 GraphQL 작업을 직접 실행하는 것도 유용하지만, Apollo Client는 React와 같은 뷰 레이어와 통합될 때 빛을 발합니다. 쿼리를 UI에 바인딩하고 새 데이터를 가져올 때 자동으로 업데이트할 수 있습니다.

React와 함께 사용하기

ApolloProvider 컴포넌트를 통해 ApolloClient를 React에 연결시킬 수 있다.

React의 Context.Provider와 유사하게, ApolloProvider는 React app을 감싸고 Apollo Client를 context 상에 놓음으로써, 컴포넌트 트리 내라면 어디서든 접근할 수 있도록 한다.


import React from 'react';
import { render } from 'react-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

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

function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  );
}

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);

useQuery로 데이터 fetch

APolloProvider 설정이 끝난 후에는, useQuery를 통해 데이터 요청을 할 수 있다.

useQuery는 GraphQL data를 UI와 공유시키는 React hook이다.


import { gql } from "@apollo/client";

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

쿼리 선언


import { useQuery } from "@apollo/client";

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>
  ));
}

컴포넌트 내에서 useQuery 사용 예시

컴포넌트가 렌더링 될 때마다 useQuery 훅이 자동으로 실행되어 loading, error, data 프롭을 포함하는 오브젝트를 반환한다.

Apollo Client는 쿼리의 에러와 로딩 상태를 추적하여, loading, error 프롭에 담는다.

쿼리 결과가 반환되면 결과가 data 프롭에 담긴다.


function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>

      <ExchangeRates />
    </div>
  );
}

index.js - graphql을 사용하는 컴포넌트인 ExchangeRates를 선언한 모습

이제 앱을 리로딩 할 때마다 짧게 loading... 글씨를 볼 수 있고, 이어서 환율 리스트가 뜨는 것을 볼 수 있다.

잘 동작하지 않는다면 completed app on CodeSandbox에 전체 코드가 있으니 비교해 보자.

이로써 GraphQL과 Apollo Client를 이용하여 렌더링되는 컴포넌트를 작성해 보았다. 자유롭게 활용ㄱㄱ

Apollo Client Devtools

크롬 확장자 링크 : https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm