Apollo Start

개발 환경 설정

apollo-client

react-apollo

graphql-tag

Apollo 클라이언트 만들기

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'http://localhost:4000/'
})

const client = new ApolloClient({
  cache,
  link
})

uri : 데이터를 가져 오기 위해 사용하는 graphql 끝점.

요청 : 모든 요청에 ​​대해 현재 사용자를 확인하기 위해 승인 헤더를 보낸다.

쿼리 만들기

import gql from "graphql-tag";

client
  .query({
    query: gql`
      query  함수명 {
        xxx(id: 00) {
          xxx
          xxx {
            xxx
          }
        }
      }
    `
  })

클라이언트를 React에 연결

import { ApolloProvider } from 'react-apollo';
import React from 'react';
import ReactDOM from 'react-dom';
import Pages from './pages';

// previous variable declarations

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

쿼리를 사용하여 데이터 가져 오기

export default function Launches() {
  return (
    <Query query={GET_LAUNCHES}>
      {({ data, loading, error }) => {
        if (loading) return <Loading />;
        if (error) return <p>ERROR</p>;
        
        return