diff --git a/with-apollo/App.js b/with-apollo/App.js
index 43420ff..56983a5 100644
--- a/with-apollo/App.js
+++ b/with-apollo/App.js
@@ -1,9 +1,99 @@
import React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { Text, View, SafeAreaView, ActivityIndicator, Image, StyleSheet } from 'react-native';
+import { ApolloProvider, useQuery, gql } from '@apollo/client';
import { apolloClient } from './apollo';
-import RootComponent from './RootComponent';
+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/RootComponent.js b/with-apollo/RootComponent.js
deleted file mode 100644
index a67e94e..0000000
--- a/with-apollo/RootComponent.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { Text, View, SafeAreaView, ActivityIndicator, Image, StyleSheet } from 'react-native';
-import { useQuery, gql } from '@apollo/client';
-
-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 RootComponent;