Merge pull request #163 from FarazPatankar/master

add with-apollo example

with-apollo/App.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Text, View, SafeAreaView, ActivityIndicator, Image, StyleSheet } from 'react-native';
+import { ApolloProvider, useQuery, gql } from '@apollo/client';
+
+import { apolloClient } from './apollo';
+
+const GET_TWEET = gql`
+  query {
+    twitter {
+      tweet(id: "1261034643710775299") {
+        text
+        user {
+          name
+          screen_name
+          profile_image_url
+        }
+      }
+    }
+  }
+`
+
+function RootComponent() {
+  const { data, loading, error } = useQuery(GET_TWEET);
+
+  if (error) { console.error('error', error) };
+  if (loading) {
+    return (
+      <SafeAreaView style={styles.loadingContainer}>
+        <ActivityIndicator />
+      </SafeAreaView>
+    );
+  };
+  const { tweet } = data.twitter;
+  const { user } = tweet;
+  return (
+    <View style={styles.container}>
+      <View style={styles.profileContainer}>
+        <Image
+          source={{ uri: user.profile_image_url }}
+          style={styles.image}
+        />
+        <View style={styles.details}>
+          <Text style={styles.name}>
+            {user.name}
+          </Text>
+          <Text style={styles.username}>
+            @{user.screen_name}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.tweetContainer}>
+        <Text style={styles.tweet}>
+          {tweet.text}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 50
+  },
+  profileContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  image: {
+    height: 50,
+    width: 50,
+    borderRadius: 100,
+  },
+  details: {
+    marginLeft: 5,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: 'bold'
+  },
+  username: {
+    color: 'gray'
+  },
+  tweetContainer: {
+    marginTop: 10
+  },
+  tweet: {
+    fontSize: 16
+  }
+});
+
+export default function App() {
+  return (
+    <ApolloProvider client={apolloClient}>
+      <RootComponent />
+    </ApolloProvider>
+  );
+}

with-apollo/README.md

@@ -0,0 +1,21 @@
+# Apollo GraphQL Example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+## 🚀 How to use
+
+- Install with `yarn` or `npm install`.
+- Run `expo start` to try it out.
+
+## 📝 Notes
+
+- The Apollo configuration lies in the `apollo.js` file.
+- The file also contains an option (with commented code) to pass an authorization token to the API.
+- [Apollo Client Docs](https://www.apollographql.com/docs/react/v3.0-beta/)

with-apollo/apollo.js

@@ -0,0 +1,31 @@
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+// import { setContext } from '@apollo/link-context';
+
+const GRAPHQL_API_URL = 'https://www.graphqlhub.com/graphql';
+
+/*
+uncomment the code below in case you are using a GraphQL API that requires some form of
+authentication. asyncAuthLink will run every time your request is made and use the token
+you provide while making the request.
+
+
+const TOKEN = '';
+const asyncAuthLink = setContext(async () => {
+  return {
+    headers: {
+      Authorization: TOKEN,
+    },
+  };
+});
+
+*/
+
+const httpLink = new HttpLink({
+  uri: GRAPHQL_API_URL,
+});
+
+export const apolloClient = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: httpLink,
+  // link: asyncAuthLink.concat(httpLink), 
+});

with-apollo/package.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "@apollo/client": "^3.0.0-beta.48",
+    "@apollo/link-context": "^2.0.0-beta.3",
+    "expo": "~37.0.3",
+    "graphql": "^15.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.6"
+  }
+}