React & Apollo & GraphQL

Description

GraphQL

• 페이스북이 발명, Github이 GraphQL API를 채택
• 자신이 원하는 속성만 쿼리해서 가져올 수 있다.

Apollo

• GraphQL 라이브러리

React 프로젝트를 할 때

• React + Rest API + Redux + (node.js) + Webpack
• React + GraphQL + Apollo + (node.js) + Parcel

Parcel

• 최근 빠르게 성장하고 있는 bundler
• 쉬운 작동 방법과 빠른 빌드
• 간단한 프로젝트에서 많이 사용

Setup

npx create-react app app-name

react router를 사용하기 위해 설치

yarn add react-router-dom

react apollo 설치

npm install apollo-boost react-apollo graphql-tag graphql --save

Apollo Boost

• GraphQL 클라이언트를 가지기 위해 모든 setup을 해준다.
• GraphQL을 위한 클라이언트

Setup Apollo Client

/src/apollo.js 또는 client.js 추가(Apollo Boost로 만든 Client)

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
 uri: "https://movieql.now.sh/"  // api가 있는 위치(https://mobieql-osezlvyqsg.now.sh) -> graphQL API를 어떻게 찾는지에 대한
});

export default client;

/src/App.js에 provider 추가

import { ApolloProvider } from "react-apollo";
import cllient from "./apollo";

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

Setting React Router

// App.js
import { HasRouter as Router, Route } from "react-dom";
import Home from "./Home";
import Detail from "./Detail";

return (
 <ApolloProvider client={client}>
  <Router>
   <div>
    <Route exact={true} path={"/"} component={Home} />
    <Route path={"/details/:movieId"} component={Detail}  />
   </div>
  <Router>
 </ApolloProvider>
);

// Home.js
import react from "react";
const Home = () => <div>Home</div>

export default Home;

// Detail.js
import react from "react";
const Detail = () => <div>Detail</div>

export default Detail;

Getting data from the GraphQL API

yarn add react-helmet

/src/queries.js

import gql from "graphql-tag";

export const HOME_PAGE = gql`
{
 movies(limit: 50, rating: 7) {
  id
  title
  genres
  rating
 }
}
`;

// Home.js
import { Query } from "react-apollo"; // 리액트에 연결
import HOME_PAGE from "./queryes";

const Home = () => {
 <Query query={HOME_PAGE}>
  {{{ loading, data, error }} => {  // render props
   if (loading) return <span>loading</span>
   if (error) return <span>something happend</span>
   return data.movies.map(movie =>
    <h2 key={movie.id}>
     {mobie.title} / {movie.rating}
    </h2>
   });
  }}
 </Query>
};

Details Route with params

// Detail.js
import { Query } from "react-apollo";
import { withRouter } from "react-router-dom";

const Detail = ({
 match: {
  params: {movieId}
 }
}) => {
 console.log(match);
 return <div>Detail</div>;
};

export  detault  withRouter(Detail);

Creating a Query with variables

// queries.js
import gql from "graphql-tag";

export const MOVIE_DETAILS = gql`
 query getMovieDetails($movieId: Int!) {
  movie(id: $ovieId) {
  medium_cover_image
  title
  rating
  description_intro
  language
  genres
 }
 suggestions(id: $movieId) {
  medium_cover_image
  title
  rating
 }
}
`;

// Detail.js
import { MOVIE_DETAILS } from "./queries";

const Detail = ({
 match: {
  params: {movieId}
 }
}) => {
 <Query query={MOVIE_DETAILS} variables={{movieId}}>
  {{{loading, error, data}} => {
   if (loading) return "laoding";
   if (error) return "error";
   return {
    <React.Fragment>
     {data.title}
     {data.medium_cover_image}
     {data.rating}
     {data.description_intro}
    </React.Fragment>
   }
  });
 };
 </Query>
}}

Conclusions

• Apollo는 cache를 지원한다. 예전에는 Redux를 이용하고, Fetch하고 했던 일들을 하지 않아도 된다.
• loading, error등 제공한다.

참고

• react-apollo
• movieql-client
• apollo-dev-tools
• graphql-tag
• react-withRouter