[Apollo] Apollo start(1)

< 아름다운 조합이다 >

이번 포스팅에는 Apollo에 대해서 알아보자.

 

Apollo는 Grapql과 함께 클라이언트단(React)의 프로그램을 만드는 데 정보를 주고 받는등 도움을 주는 API이다.

 

Redux와 같은 역할...? 인지는 모르겠지만 Redux와 비교 되고 있는것으로 보인다.

 

 설치해야할 툴은

apollo-boost와 react-apollo이다.

apollo-boost

apollo-boost는 graphql와 클라이언트를 연결해준다.

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://127.0.0.1:4000/"
});

export default client;

무서울 정도로 간단하다..

apolllo-boost 객체에 키가 uri이고 값이 graphql 서버주소를 전달해주기만 하면 된다.

 

react-apollo

root에 render할 컴포넌트에 Provider를 제공하는 객체이다.

import React, { Component } from "react";
import { ApolloProvider } from "react-apollo";
import client from "./apollo";

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div className="App"> hello</div>
      </ApolloProvider>
    );
  }
}

export default App;

이 때 Provider에 client 속성을 추가해야 한다.

client는 apollo-boost에서 생성한 클라이언트 객체.

 

< 크롬 확장 도구인 apollo dev tools >

이후에 제대로 연결된 모습을 볼 수 있다.