Add Apollo and display chapters on the home screen

Author: lorensr

App.js

@@ -2,23 +2,31 @@ import React from 'react'
 import { StatusBar } from 'expo-status-bar'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 
 import HomeScreen from './src/HomeScreen'
 import { screenOptions } from './src/styles'
 
 const Stack = createStackNavigator()
 
+const client = new ApolloClient({
+  uri: 'https://api.graphql.guide/graphql',
+  cache: new InMemoryCache(),
+})
+
 export default function App() {
   return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home" screenOptions={screenOptions}>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{ title: '📖 The GraphQL Guide' }}
-        />
-      </Stack.Navigator>
-      <StatusBar style="light" />
-    </NavigationContainer>
+    <ApolloProvider client={client}>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home" screenOptions={screenOptions}>
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={{ title: '📖 The GraphQL Guide' }}
+          />
+        </Stack.Navigator>
+        <StatusBar style="light" />
+      </NavigationContainer>
+    </ApolloProvider>
   )
 }

src/HomeScreen.js

@@ -1,7 +1,51 @@
 import React from 'react'
+import { Text, FlatList, Pressable } from 'react-native'
+import { gql, useQuery } from '@apollo/client'
 
 import Loading from './Loading'
+import styles from './styles'
+
+const CHAPTERS_QUERY = gql`
+  query Chapters {
+    chapters {
+      id
+      number
+      title
+    }
+  }
+`
+
+const ChapterItem = ({ chapter }) => {
+  const { number, title } = chapter
+  let header, subheader
+
+  if (number) {
+    header = `Chapter ${number}`
+    subheader = title
+  } else {
+    header = title
+  }
+
+  return (
+    <Pressable style={styles.item}>
+      <Text style={styles.header}>{header}</Text>
+      {subheader && <Text style={styles.subheader}>{subheader}</Text>}
+    </Pressable>
+  )
+}
 
 export default () => {
-  return <Loading />
+  const { data, loading } = useQuery(CHAPTERS_QUERY)
+
+  if (loading) {
+    return <Loading />
+  }
+
+  return (
+    <FlatList
+      data={data.chapters}
+      renderItem={({ item }) => <ChapterItem chapter={item} />}
+      keyExtractor={(chapter) => chapter.id.toString()}
+    />
+  )
 }