import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://api.graphql.guide/graphql',
  cache: new InMemoryCache(),
})

export default function App() {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        ...
      </NavigationContainer>
    </ApolloProvider>
  )
}

import { Text, FlatList, Pressable } from 'react-native'
import { gql, useQuery } from '@apollo/client'

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 () => {
  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()}
    />
  )
}