Using GraphQL code generator

Items.tsx

import React from 'react'
import { Text, View, TouchableOpacity, ImageBackground, ScrollView } from 'react-native'
import gql from 'graphql-tag'
import { FlatGrid } from 'react-native-super-grid'
import { useItemsQuery } from '../../generated/graphql'

export const ITEMS_QUERY = gql`
  query Items($communityId: String!) {
    items(communityId: $communityId) {
      _id
      name
      price
      userId
      communityId
      imageUrl
      locationLng
      locationLat
    }
  }
`

const Items = (props: { navigation: any }) => {
  const communityId = props.navigation.getParam('communityId')
  const communityName = props.navigation.getParam('communityName')

  const { loading, error, data } = useItemsQuery({
    variables: {
      communityId,
    },
  })

  if (!data) return null

  return (
    <ScrollView>
      <Text>{communityName}</Text>

      <FlatGrid
        items={data.items}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => {
              props.navigation.navigate('Item', {
                item,
              })
            }}
          >
            <ImageBackground
              imageStyle={{ borderRadius: 10 }}
              source={{ uri: item.imageUrl }}
            >
              <Text>{item.name}</Text>
            </ImageBackground>
          </TouchableOpacity>
        )}
      />
    </ScrollView>
  )
}

export default Items