들억가기
휴대폰을 껏다 켯을 때, 혹시 server가 다운되어있거나, 꺼져있을떄,
마지막으로 접속해서 봤던 data들이 cache에 남아있게 해서,
서버가 다운되어도, 그 data들을 볼 수 있게 cache를 저장해 놓는것
npm i apollo3-cache-persist
import React, { useState } from 'react'
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 LoggedInNav from './navigators/LoggedInNav'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { ApolloProvider, useReactiveVar } from '@apollo/client'
import { client, isLoggedInVar, TOKEN, tokenVar, cache } from './apollo' !!!!!!
import { AsyncStorageWrapper, persistCache } from 'apollo3-cache-persist' !!!!!!
export default function App() {
const [loading, setLoading] = useState(true)
const onFinish = () => setLoading(false)
const isLoggedIn = 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)
if (token) {
isLoggedInVar(true)
tokenVar(token)
}
await persistCache({
cache,
storage: new AsyncStorageWrapper(AsyncStorage),
})
///preload부분에서 persistCache, cache, storage를 설정한다.
///persistCache와 AsyncStorageWapper이 import되는 부분을 유의한다.
///cache를 import 할 수 있게 apollo.js에서 cache부분만 따로 분리해서,
///export 시킨다.
return preloadAssets()
}
if (loading) {
return (
<AppLoading
startAsync={preload}
onError={console.warn}
onFinish={onFinish}
/>
)
}
return (
<ApolloProvider client={client}>
<NavigationContainer>
{isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}
</NavigationContainer>
</ApolloProvider>
)
}
import {
makeVar,
ApolloClient,
InMemoryCache,
createHttpLink,
} from '@apollo/client'
import { setContext } from '@apollo/client/link/context'
import { offsetLimitPagination } from '@apollo/client/utilities'
import AsyncStorage from '@react-native-async-storage/async-storage'
export const isLoggedInVar = makeVar(false)
export const tokenVar = makeVar('')
export const TOKEN = 'token'
export const logUserIn = async (token) => {
await AsyncStorage.setItem(TOKEN, token)
isLoggedInVar(true)
tokenVar(token)
}
export const logUserOut = async () => {
await AsyncStorage.removeItem(TOKEN)
isLoggedInVar(false)
tokenVar(null)
}
const httpLink = createHttpLink({
uri: 'http://10.0.2.2:4000/graphql',
})
const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
token: tokenVar(),
},
}
})
********************************************************
export const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
seeFeed: offsetLimitPagination(),
},
},
},
})
원래, ApolloClient안에 들어 있던 cache부분을 App.js에서 import 할 수 있게
밖으로 cache부분은 꺼집어내어놓음,
***************************************************************
export const client = new ApolloClient({
link: authLink.concat(httpLink),
cache,
})