[인스타그램클론코딩] #10.2 Preloading Cache (apollo-cache-persist)

안녕하세요 강정호입니다.

 

오늘은 앱에서 캐시를 사용하여 데이터를 로딩할 수 있도록 구현해보겠습니다.

 

github.com/apollographql/apollo-cache-persist

apollographql/apollo-cache-persist

 

 

 

 

 

 

 

 

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { Ionicons } from "@expo/vector-icons";
import { Text, View } from 'react-native';
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import { Asset } from 'expo-asset';
import { InMemoryCache } from "apollo-cache-inmemory";
import { persistCache } from "apollo3-cache-persist";
import ApolloClient from "apollo-boost";
import AsyncStorage from "@react-native-community/async-storage";
import apolloClientOptions from "./apollo";
import { ApolloProvider } from "react-apollo-hooks";

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const [client, setClient] = useState(null);
  const preLoad = async () => {
    try{
      await Font.loadAsync({
        ...Ionicons.font
      });
      await Asset.loadAsync([require("./assets/instagram_logo.png")]);
      const cache = new InMemoryCache();
      await persistCache({
        cache,
        storage: AsyncStorage
      });
      const client = new ApolloClient({
        cache,
        ...apolloClientOptions
      });
      setLoaded(true);
      setClient(client);
    }catch(e){
      console.log(e);
    }
  };

  useEffect(() => {
    preLoad();
  }, []);

  return loaded && client ? (
    <ApolloProvider client={client}>
        <View>
          <Text>Open up App  . start working with your app</Text>
        </View>
    </ApolloProvider>
    
  ) : (
    <AppLoading />
  );
}