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 + +

+ + Supports Expo iOS + + Supports Expo Android + + Supports Expo Web +

+ +## 🚀 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" + } +}