GraphQL - Apollo react 앱 만들기 (1)

이제까지 만들어놓은 GraphQL API를 사용하는 Apollo 클라이언를 만들어본다.
react를 사용하도록 한다.

프로젝트를 시작하기에 앞서,필요한 모듈을 설치해준다.

• yarn add react-router-dom apollo-boost react-apollo graphql-tag graphql react-helmㄷt --save

Apollo

이 중 Apollo Boost는 GraphQL 클라이언트를 가지기 위한 모든 것을 세팅해준다.
GraphQL-Apollo 클라이언트의 cli 정도로 생각해주자.
redux처럼 Apollo도 Provider를 가지고 있다.
(container, present 등)

1. client 생성/선언
   Apollo Boost를 이용하여 client를 쉽게 형성하는 파일의 코드를 작성해보자

apolloClient.js
클라이언트가 이전 시간에 만들어놓은 GraphQL API를 사용하기 위하여,
uri라는 이름으로 해당 주소를 참조한다.
기본적으로 4000번 포트의 로컬 서버로 동작하므로 아래와 같이 작성하였다.
클라이언트에서 한번 uri를 인지하면, 이외에 다른 url은 전혀 사용할 필요없다.
우리에겐 query와 mutation 등이 있기 때문이다.

import ApolloClient from "apollo-boost";

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

export default client;

2. apollo client 사용하기
   어떤 API를 끌어다 사용할 건지 알게 되었으니,
   실제로 컴포넌트에 사용 가능하도록 만들어야한다.
   react-apollo의 ApolloProvider를 통하여 제공하면 된다.

App.js

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

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

export default App;

3. 클라이언트가 API를 불러오는지 확인하기
   먼저 지난 번에 만든 GraphQL-yoga를 실행한다. 그러고 난 뒤, react를 실행하자.
   크롬 브라우저를 사용중이라면, 확장 프로그램 중 Apollo Dev Tool을 통하여 기존에 작성한 Query들을 알고 있는지 확인해볼 수 있다.

tool 실행화면은 아래와 같다.

오른쪽의 query fieldf를 보면, 사용가능한 query의 종류와 형식을 확인할 수 있다!
클라이언트가 서버로 어떻게 요청을 해야하는지 바로 알 수 있는 것이다!
따로 Documentation을 하지 않아도 알 수 있으니 편리하게 쓸 수 있다.

query에 대한 응답을 tool에서 바로 볼 수도 있다!

---

본격적으로 필요한 파일을 추가해보자

App.js
react-router-dom을 사용하여 HashRouter를 import하고
각 path별 component reder routing을 해준다.

Home과 Detail이라는 컴포넌트를 만들어서 렌더할 것이다.

import React, {Component} from 'react';
import client from './apolloClient';
import  { ApolloProvider } from 'react-apollo';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import Detail from './Detail';

class App extends Component {
  render() {
    return (
      
        
          
          
        
      
      ) 
  }
}
export default App;

queries.js
프론트엔드에서 GraphQL을 작성할 수 있도록 해주어야 한다.
graphql-tag가 이를 가능하게 해준다.
아래와 같은 형식에 맞추어 GraphQl API의 query를 삽입하면 사용이 가능해진다.

import gql from 'graphql-tag';
//movies라는 query를 사용하려 할 때,
//gql``의 `` 사이에 query를 작성하면 된다.
//아래의 HOME_PAGE는 Home 컴포넌트가 렌더될 때 사용할 query이다.
export const HOME_PAGE = gql`
    query {
        movies(limit:50, rating:7) {
            id
            title
            genres
            rating
        }
    }
`;

그럼 실제로 query 요청을 보내어 사용하게 될 컴포넌트는 어떻게 만들어야 할까?

Home.js
여기선 Home 컴포넌트를 render prop의 형태로 사용한다.
render prop은 컴포넌트 안에 함수를 넣는데,컴포넌트는 해당 함수를 render와 동시에 실행한다.

import React from 'react';
import { Query } from 'react-apollo';
import{ HOME_PAGE } from './queries';

const Home = () =>
        //react-apollo의 Query 컴포넌트가 query를 날려서 데이터를 요청한다.
        //요청 후 loading인 상태를 loading === true 로 알 수 있다.
        //data가 불러와진 상태의 data이다.
        //요청 시 error가 발생하는 걸 확인할 수 있다.
            
        {({ loading, data, error }) => {
            if(loading) return loading;
            if(error) return something happened;
            if(data) {
                return data.movies.map(movie => 
{movie.title} / {movie.rating}
)
            }
        }}
    

export default Home;

여기까지 작성 후 저장하고,
다시 홈페이지로 이동하면...!

어떠한 fetch도 없고,
json respond get url headers 이런 것은 물론이고
어떠한 setState도 없다!
정말 간단하다!!!
Query 컴포넌트에 원하는 query만 넣어주면 된다!!!
왐마...