asyncStorage, login persist, makeVar

들어가기
web에서 localStorage에 token을 넣어서 login Persist를 한것을,
app에서 어떻게 구현할 것인지 설명함,
web에서의 localStorage기능은 app에서 asyncStorage가 한다고 보면됨.

expo install @react-native-async-storage/async-storage	

1. apollo.js

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

export const isLoggedInVar = makeVar(false)
export const tokenVar = makeVar('')
///4.  isLoggedInVar와 tokenVar 두개를 makeVar로 만듬.
///isLoggedInVar는 login유지, tokenVar는 token을 담아둠.


///2. login page에서  login mutaiton 실행 후 받은 token을
///logUserIn 함수에 담아준다.

**********login.js**************
const onCompleted = async (data) => {
    const {
      login: { ok, token },
    } = data
    if (ok) {
      await logUserIn(token)
    }
  }
  *******************************************************


///3. token을 받아서 AsyncStorage.multiSet으로 담아줌.
///'loggedIn'은 여러개를 담을 떄, 배열을 사용해야 함으로 예시를 위해 만들어놓음.
///시용되지는 않음.

export const logUserIn = async (token) => {   
                                                       
  await AsyncStorage.multiSet([
    ['token', JSON.stringify(token)],
    ['loggedIn', JSON.stringify('yes')],
  ])
  isLoggedInVar(true)
  tokenVar(token)
  ///5. AsyncStorage에 token을 담아준 다음, 
  ///isLoggedInVar는 true로 tokenVar에는 token을 담아줌.
}

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

export default client

2. App.js(login persist)

import React, { useState } from 'react'
import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import * as Font from 'expo-font'
import { Asset } from 'expo-asset'
import AppLoading from 'expo-app-loading'
import LoggedOutNav from './navigators/LoggedOutNav'
import { NavigationContainer } from '@react-navigation/native'
import { ApolloProvider, useReactiveVar } from '@apollo/client'
import client, { isLoggedInVar, tokenVar } from './apollo'
import LoggedInNav from './navigators/LoggedInNav'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function App() {
  const [loading, setLoading] = useState(true)
  const onFinish = () => setLoading(false)
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  
  ///1. isLoggedIn을 만들어서 전 page에서 적용되게
  ///useReactiveVar(isLoggedInVar)를 만들어줌,,
  
  const preloadAssets = () => {
    const fontsToLoad = [Ionicons.font]
    const fontPromises = fontsToLoad.map((font) => Font.loadAsync(font))
    const imagesToLoad = [require('./assets/logo.png')]
    const imagesPromises = imagesToLoad.map((image) => Asset.loadAsync(image))
    return Promise.all([...fontPromises, ...imagesPromises])
  }
  const preload = async () => {
    const token = await AsyncStorage.getItem('token');
    
    ///2. preload부분에서 AsyncStorage에 저장되어 있던 toke을 꺼내어서
    /// tokenVar에 담아놓음.
    ///그리고 token이 있으면, isLoggedInVar를 true로 바꿔줌
    
    console.log(token)
    if (token) {
      isLoggedInVar(true)
      tokenVar(token)
    }
    return preloadAssets()
  }
  if (loading) {
    return (
      <AppLoading
        startAsync={preload}
        onError={console.warn}
        onFinish={onFinish}
      />
    )
  }
  
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        {isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}
        ///3. isLoggedIn으로 login여부를 확인해서 어디로 rendering될지를 
        //결정해 줌.
        
      </NavigationContainer>
    </ApolloProvider>
  )
}