create a simple example

apollographql · Sep 29, 2020 · 483d35b · 483d35b
1 parent c4b1f36
commit 483d35b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 109 deletions.
diff --git a/RNExample/App.tsx b/RNExample/App.tsx
@@ -8,30 +8,19 @@
  * @format
  */
 
-import React, {useEffect} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {SafeAreaView, StyleSheet, ScrollView, Text} from 'react-native';
 import {ApolloClient, InMemoryCache} from '@apollo/client';
 import {persistCache} from 'apollo3-cache-persist';
 import AsyncStorage from '@react-native-community/async-storage';
+import {gql} from '@apollo/client';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-declare const global: {HermesInternal: null | {}};
+import {Colors} from 'react-native/Libraries/NewAppScreen';
 
 const App = () => {
+  const [currencies, setCurrencies] = useState([]);
+  const [error, setError] = useState('');
+
   useEffect(() => {
     async function init() {
       const cache = new InMemoryCache();
@@ -43,52 +32,48 @@ const App = () => {
         uri: 'https://48p1r2roz4.sse.codesandbox.io',
         cache: new InMemoryCache(),
       });
+      try {
+        const {data} = await client.query({
+          query: gql`
+            query GetRates {
+              rates(currency: "USD") {
+                currency
+              }
+            }
+          `,
+        });
+
+        //@ts-ignore type this
+        setCurrencies(data.rates);
+      } catch (e) {
+        setError(e.message);
+      }
     }
     init();
   }, []);
 
   return (
     <>
-      <StatusBar barStyle="dark-content" />
       <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change
-                this screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
+        {error ? (
+          <Text style={{padding: 16, fontWeight: 'bold'}}>{error}</Text>
+        ) : (
+          <>
+            <Text style={{padding: 16, fontWeight: 'bold'}}>
+              List of currencies
+            </Text>
+            <ScrollView
+              contentInsetAdjustmentBehavior="automatic"
+              style={styles.scrollView}>
+              {currencies.map((item, index) => (
+                //@ts-ignore type it
+                <Text key={item.currency + String(index)} style={{padding: 16}}>
+                  {item.currency}
+                </Text>
+              ))}
+            </ScrollView>
+          </>
+        )}
       </SafeAreaView>
     </>
   );
@@ -98,39 +83,6 @@ const styles = StyleSheet.create({
   scrollView: {
     backgroundColor: Colors.lighter,
   },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
 });
 
 export default App;
diff --git a/RNExample/babel.config.js b/RNExample/babel.config.js
@@ -1,14 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        alias: {
-          'apollo3-cache-persist': '../src',
-        },
-        cwd: 'babelrc',
-      },
-    ],
-  ],
 };
diff --git a/RNExample/package.json b/RNExample/package.json
@@ -12,22 +12,22 @@
   "dependencies": {
     "@apollo/client": "^3.2.1",
     "@react-native-community/async-storage": "^1.12.0",
+    "apollo3-cache-persist": "^0.5.0",
     "graphql": "^15.3.0",
     "react": "16.13.1",
-    "react-native": "0.63.2",
-    "apollo3-cache-persist": "../src"
+    "react-native": "0.63.2"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
     "@babel/runtime": "^7.8.4",
-    "babel-plugin-module-resolver": "^3.1.3",
     "@react-native-community/eslint-config": "^1.1.0",
     "@types/jest": "^25.2.3",
     "@types/react-native": "^0.63.2",
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "babel-jest": "^25.1.0",
+    "babel-plugin-module-resolver": "^3.1.3",
     "eslint": "^6.5.1",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.59.0",

diff --git a/RNExample/yarn.lock b/RNExample/yarn.lock
@@ -1555,8 +1555,10 @@ anymatch@^3.0.3:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apollo3-cache-persist@../src:
-  version "0.0.0"
+apollo3-cache-persist@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/apollo3-cache-persist/-/apollo3-cache-persist-0.5.0.tgz#dfcef9ead34b7a3e755a12f547fb0ce31d5acc1f"
+  integrity sha512-z0unaojkKTWvMeWZKC42DR/HN/PjVrWlNTJngb9UCz1eqCU2WIklsFrinbpLBV5gHco8aGg0w9gFRxgDulxQpw==
 
 argparse@^1.0.7:
   version "1.0.10"
@@ -6578,9 +6580,9 @@ [email protected]:
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
 symbol-observable@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-2.0.1.tgz#ce66c36a04ed0f3056e7293184749a6fdd7063ea"
-  integrity sha512-QrfHrrEUMadQCgMijc3YpfA4ncwgqGv58Xgvdu3JZVQB7iY7cAkiqobZEZbaA863jof8AdpR01CPnZ5UWeqZBQ==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-2.0.2.tgz#735850c95ec37778dbad1090b8d791ef6f77e1af"
+  integrity sha512-cYdTSAm+IDlOeRK1Bx4Sz+WIAokT0SQT+jst9NEjbjPQCrCtoSvihFBlDtUqJieYXZogq1QwNUKWRXZdK8PAOA==
 
 symbol-tree@^3.2.2:
   version "3.2.4"