이번에는 GraphQL과 React를 사용하여 웹앱을 개발합니다. apollo-graphql에서 제공하는 react-apollo를 사용하면 웹앱을 정말 쉽게 개발 할 수 있습니다. [GraphQL #1] GraphQL로 API 서버 만들기에서 이어지는 내용입니다.
우리는 크롬 브라우저에서 개발할 것입니다. 개발하기 전에 아래 크롬 브라우저 확장 프로그램을 설치해주세요.
Apollo Client Developer Tools 설치
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm
React Developer Tools 설치
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
이 글은 니꼴라스님의 동영상 강의 GraphQL, Apollo로 웹앱 만들기 를 학습하고 정리한 내용입니다.
create-react-app 설치
create-react-app
를 설치한다.
$ npm install -g create-react-app
create-react-app를 사용하려면 Node 8.10.0 이상이어야 한다.
create-react-app
도구를 사용하기 위해 node를 업데이트한다.
$ brew update
$ brew upgrade node
참고로 나는 MacOS라서
homebrew
를 사용하여 node를 업데이트했다.
프로젝트 생성
create-react-app
도구를 사용하여 프로젝트를 생성한다.
$ npx create-react-app movieql-client
create-react-app
를 사용한 프로젝트 생성은 npx, npm, yarn 으로 생성하는 방법이 있다. 자세한 내용은 여기를 참고한다.
필요한 모듈 설치
react router를 사용하기 위해 react-router-dom
를 설치한다.
$ yarn add react-router-dom
그리고 react-apollo
를 설치한다.
$ yarn add apollo-boost react-apollo graphql-tag graphql
구현하기
apolloClient.js
파일을 생성한다.
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: 'http://localhost:4000'
});
export default client;
ApolloClient
객체의 uri
에는 GraphQL API 서버 주소를 등록한다.
여기서 사용한 graphql API 서버 소스는 깃허브에 업로드되어 있다.
https://github.com/anpigon/movieql/
queries.js
파일을 생성한다.
import gql from "graphql-tag";
export const HOME_PAGE = gql`
query {
movies(limit:50, rating: 7) {
id
title
rating
medium_cover_image
}
}
`;
GraphQL API 서버에서 데이터를 조회하기 위한 쿼리문을 입력한다.
Home.js
파일 생성한다.
import React from "react";
import { Query } from "react-apollo";
import { HOME_PAGE } from "./queries";
const Home = () => (
<Query query={HOME_PAGE}>
{
({ loading, data, error }) => {
if(loading) return <span>loading</span>;
if(error) return <span>ERROR</span>;
return data.movies.map(movie => (
<h2 key={movie.id}>
{movie.title} / {movie.rating}
</h2>
));
}
}
</Query>
);
export default Home;
앞에서 만든 HOME_PAGE
쿼리를 사용하여 데이터를 조회한다. title
과 rating
데이터를 가져와서 화면에 출력할 것이다.
App.js
파일을 수정한다.
import React, { Component } from 'react';
import { HashRouter as Router, Route } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import client from "./apolloClient";
import Home from "./Home";
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<Router>
<main>
<Route exact={true} path={"/"} component={Home} />
</main>
</Router>
</ApolloProvider>
);
}
}
export default App;
ApolloProvider
컴포넌트를 사용하여 Router
를 감싼다. 그리고 라우트 /
에 Home
컴포넌트를 등록한다.
아래는 결과 화면이다.
구현하고 보니 코드 라인 수가 몇줄 안된다. 내 생각에는 apollo-graphql
를 사용하면 개발시간을 절약할 수 있을 것 같다.
끝.
Sponsored ( Powered by dclick )
바이트볼 주간 뉴스레터(11월 9일자), Delta 다이렉트 지원, 프리랜서 작가 채용, WCG 공헌자 천 명 돌파
바이트볼 주간 뉴스레터 2018. 11. 09 일자 소식을 전합니다. 이번 주 주요 내용은 다...