Apollo Client in native

들어가기
phone에서 서버와 통신을 하게 하는 방법.
apollo client, graphql, web과 비슷함.

npm install @apollo/client graphql

1. ngrok

ngrok은 내부 port를 바깥으로 쏴주는 기능임.
한마디로 localhost:3000번에 돌고 있는 application을
외부에서도 접속이 가능하게 쏴주는것.

1. ngrok 싸이트로 가서 ngrok 파일을 다운받고 압출해제

2. 토큰 입력

3. ngrok http 3000(예를 들어서 외부로 오픈해줄 port를 말함)
   구글에서 ngrok 검색하면 page나옴.
   https://dashboard.ngrok.com/get-started/your-authtoken

   https://ngrok.com/download
   ./ngrok http 4000

2. localtunnel

기능은 ngrok과 같음.
1. npx localtunnel --port 4000(오픈해줄 port임)

3. apollo client

->server와 통신하기 위한 라이버러리.

apollo.js

import { ApolloClient, InMemoryCache, makeVar } from '@apollo/client'
import AsyncStorage from '@react-native-async-storage/async-storage'

export const isLoggedInVar = makeVar(false)
export const tokenVar = makeVar('')

export const logUserIn = async (token) => {
  await AsyncStorage.multiSet([
    ['token', JSON.stringify(token)],
    ['loggedIn', JSON.stringify('yes')],
  ])
  isLoggedInVar(true)
  tokenVar(token)
}

const client = new ApolloClient({
  uri: 'https://ff78-182-222-65-111.jp.ngrok.io/graphql',
  ///ngrok으로 만들어준 port임. 원래는 http://localhost:4000/graphql,
  ///혹은 'http://10.0.2.2:4000/graphql'
  
  cache: new InMemoryCache(),
})

export default client

그리고 App.js에서 ApolloProvider client={client}로 감싸주면 마무리

App.js

  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        {isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}
      </NavigationContainer>
    </ApolloProvider>
  )~~~~