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'
 
 importHomeScreenfrom'./src/HomeScreen'
 import{screenOptions}from'./src/styles'
 
 constStack=createStackNavigator()
 
+constclient=newApolloClient({
+uri: 'https://api.graphql.guide/graphql',
+cache: newInMemoryCache(),
+})
+
 exportdefaultfunctionApp(){
 return(
-<NavigationContainer>
-<Stack.NavigatorinitialRouteName="Home"screenOptions={screenOptions}>
-<Stack.Screen
-name="Home"
-component={HomeScreen}
-options={{title: '📖 The GraphQL Guide'}}
-/>
-</Stack.Navigator>
-<StatusBarstyle="light"/>
-</NavigationContainer>
+<ApolloProviderclient={client}>
+<NavigationContainer>
+<Stack.NavigatorinitialRouteName="Home"screenOptions={screenOptions}>
+<Stack.Screen
+name="Home"
+component={HomeScreen}
+options={{title: '📖 The GraphQL Guide'}}
+/>
+</Stack.Navigator>
+<StatusBarstyle="light"/>
+</NavigationContainer>
+</ApolloProvider>
 )
 }

src/HomeScreen.js

@@ -1,7 +1,51 @@
 importReactfrom'react'
+import{Text,FlatList,Pressable}from'react-native'
+import{gql,useQuery}from'@apollo/client'
 
 importLoadingfrom'./Loading'
+importstylesfrom'./styles'
+
+constCHAPTERS_QUERY=gql`
+ query Chapters{
+ chapters{
+ id
+ number
+ title
+ }
+ }
+`
+
+constChapterItem=({ chapter })=>{
+const{ number, title }=chapter
+letheader,subheader
+
+if(number){
+header=`Chapter ${number}`
+subheader=title
+}else{
+header=title
+}
+
+return(
+<Pressablestyle={styles.item}>
+<Textstyle={styles.header}>{header}</Text>
+{subheader&&<Textstyle={styles.subheader}>{subheader}</Text>}
+</Pressable>
+)
+}
 
 exportdefault()=>{
-return<Loading/>
+const{ data, loading }=useQuery(CHAPTERS_QUERY)
+
+if(loading){
+return<Loading/>
+}
+
+return(
+<FlatList
+data={data.chapters}
+renderItem={({ item })=><ChapterItemchapter={item}/>}
+keyExtractor={(chapter)=>chapter.id.toString()}
+/>
+)
 }