<React Typescript Setup Tutorial> 1. Apollo 세팅하기 (작성 중..)

기본 개발 환경 구축

create-react-app sample-client --typescript
yarn add apollo-boost graphql react-apollo
// apollo.ts

import ApolloClient, { Operation } from 'apollo-boost'

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
})

export default client
// index.tsx

import React from 'react'
import { ApolloProvider } from 'react-apollo'
import ReactDOM from 'react-dom'
import client from './apollo'

import App from './App'

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)
import ApolloClient, { Operation } from 'apollo-boost'

const client = new ApolloClient({
  clientState: {
    defaults: {
      auth: {
        __typename: 'Auth',
        isLoggedIn: Boolean(localStorage.getItem('authToken')),
      },
    },
    resolvers: {
      Mutation: {
        logUserIn: (_, { token }, { cache }) => {
          localStorage.setItem('authToken', token)
          cache.writeData({
            data: {
              auth: {
                __typename: 'Auth',
                isLoggedIn: true,
              },
            },
          })
          return null
        },
        logUserOut: (_, __, { cache }) => {
          localStorage.removeItem('authToken')
          cache.writeData({
            data: {
              auth: {
                __typename: 'Auth',
                isLoggedIn: false,
              },
            },
          })
          return null
        },
      },
    },
  },
  request: async (operation: Operation) => {
    operation.setContext({
      headers: {
        'X-User-Token': localStorage.getItem('authToken') || '',
      },
    })
  },
  uri: 'http://localhost:4000/graphql',
})

export default client

Reference


Jaewoo Cho (flowkater)
Written by@Jaewoo Cho (flowkater)
작은 스타트업을 운영합니다. 항상 생존이 최우선인 삶을 살지만 하고 싶은거 하고 삽니다. 개발을 잘할만큼 부지런하지는 못하지만, 개발을 즐길만큼 똑똑하긴 합니다.

GitHubFacebook