[인스타그램 클론코딩] #4.3 Apollo Client

안녕하세요 강정호입니다.

오늘은 ApolloClient를 이용하여 Graphql API와 연동해보겠습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Component/App';
import {ApolloProvider} from "react-apollo-hooks";
import Client from "./Apollo/Client";

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={Client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

ApolloProvider 란?

ApolloClient를 사용하여 Graphql API와 연동 가능하게 해주는 컴포넌트로 앱의 최상위 컴포넌트를 감싸주어야 한다.

 

 

Client.js

import { ApolloClient } from "apollo-boost";
import { defaults, resolvers } from "./LocalState";

export default () => new ApolloClient({
    uri : 'http://localhost:4000',
    clientState: {
        defaults,
        resolvers
    }
});

ApolloClient 란?

Graphql API를 접속할 수 있게 도와주는 기능으로 접속할 uri를 설정해주어야 한다.

 

다음으로, 위에서 생성한 ApolloClient 객체를 React에 연결해줘야 합니다. 앱 내에서 특정 React 컴포넌트만 GraphQL API 호출이 필요한 경우가 아닌 이상, 모든 React 컴포넌트에서 ApolloClient를 사용하도록 설정하는 것이 일반적입니다. index.js에서 이러한 연동처리를 완료하였다.

 

LocalState.js

LocalState는 브라우저 저장소를 이용하여 로그인 할 경우 토큰을 저장하고, 로그아웃 할 때 토큰을 제거하는 기능을 가진다

/**
 * defaults의 용도
 * localStorage에서 token을 가져와서 로그인 여부를 확인한다.
 * localStorage : 기본적으로 브라우저에서 지원하는 저장소.
 * 이 저장소는 application 전역에서 접근 가능. localStorage는 직접 지우기 전까지 저장된다.
 */
export const defaults = {
    // key, value 형태로 데이터를 저장하고 불러온다
    isLoggedIn : localStorage.getItem("token") !== null ? true : false
};

export const resolvers = {
    Mutation : {
        logUserIn: (_, {token}, {cache}) => {
            // 토큰을 저장한다
            localStorage.setItem("token", token);

            // 캐시에 로그인 성공 데이터 저장
            cache.writeData({
                data: {
                    isLoggedIn : true
                }
            });
            return null;
        },
        logUserOut: (_, _, { cache }) => {

            // 로그아웃시 토큰 삭제
            localStorage.removeItem("token");

            //이건 무슨용도?
            window.location.reload();
            return null;
        }
    }
}