diff --git a/with-apollo/App.js b/with-apollo/App.js
new file mode 100644
index 0000000..56983a5
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ };
+ const { tweet } = data.twitter;
+ const { user } = tweet;
+ return (
+
+
+
+
+
+ {user.name}
+
+
+ @{user.screen_name}
+
+
+
+
+
+ {tweet.text}
+
+
+
+ )
+}
+
+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 (
+
+
+
+ );
+}
diff --git a/with-apollo/README.md b/with-apollo/README.md
new file mode 100644
index 0000000..5959db2
--- /dev/null
+++ b/with-apollo/README.md
@@ -0,0 +1,21 @@
+# Apollo GraphQL Example
+
+
+
+
+
+
+
+
+
+
+## 🚀 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/)
diff --git a/with-apollo/apollo.js b/with-apollo/apollo.js
new file mode 100644
index 0000000..97c4013
--- /dev/null
+++ b/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),
+});
diff --git a/with-apollo/package.json b/with-apollo/package.json
new file mode 100644
index 0000000..50f6c56
--- /dev/null
+++ b/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"
+ }
+}