<div id="readability-page-1" class="page"><div data-language="s"><pre><code>create-react-app sample-client --typescript</code></pre></div><div data-language="s"><pre><code>yarn add apollo-boost graphql react-apollo</code></pre></div><div data-language="ts"><pre><code>// apollo.ts

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

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

export default client</code></pre></div><div data-language="ts"><pre><code>// 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(
 &lt;ApolloProvider client={client}&gt;
 &lt;App /&gt;
 &lt;/ApolloProvider&gt;,
 document.getElementById('root')
)</code></pre></div><div data-language="ts"><pre><code>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 }) =&gt; {
 localStorage.setItem('authToken', token)
 cache.writeData({
 data: {
 auth: {
 __typename: 'Auth',
 isLoggedIn: true,
 },
 },
 })
 return null
 },
 logUserOut: (_, __, { cache }) =&gt; {
 localStorage.removeItem('authToken')
 cache.writeData({
 data: {
 auth: {
 __typename: 'Auth',
 isLoggedIn: false,
 },
 },
 })
 return null
 },
 },
 },
 },
 request: async (operation: Operation) =&gt; {
 operation.setContext({
 headers: {
 'X-User-Token': localStorage.getItem('authToken') || '',
 },
 })
 },
 uri: 'http://localhost:4000/graphql',
})

export default client</code></pre></div></div>

flowkater's data;

flowkater

기본 개발 환경 구축
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
https://velog.io/@zansol/%EC%A3%BC%EB%8B%88%EC%96%B4%ED%83%88%EC%B6%9C%EA%B8%B0-Apollo-Client-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0
https://www.daleseo.com/graphql-react-apollo-client/
https://medium.com/@han7096/graphql-%EA%B3%BC-apollo%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EB%A9%B0-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC-42981522b188

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

댓글