React Native Shopify StoreFront API GraphQL API Infinite Loading Products fetchMore error

Question

I am using ApolloClient from apollo-boost to connect with Shopify StoreFront API, graphql-tag to build my Queries and useQuery React Hook to load products into a FlatList infinitely.

I am able to load components based on the return values, but only up to about 25 product objects, (either with useQuery or with fetchMore) when I try to pass the values of the object as props to Product components I get this error: null is not an object (evaluating: 'item.node.variants.edges[0].node.image.transformedSrc) after 25 products

Though I was able to log the return product values but I still get the error.

const ProductSize = 8
const { loading, error, data, fetchMore } = useQuery(PRODUCTS, {
        variables: { productSize },
        notifyOnNetworkStatusChange: true,
})

return (
 {
  loading || !data.products ? <ActivityIndicator animating={true} color={Colors.tintColor} style={styles.listing} /> : 
            <FlatList
             data={data.products.edges || []}
             style={styles.listing}
             //onRefresh={() => refetch()}
             ListEmptyComponent={listEmptyComponent}
             renderItem={({ item }) => 
                <Product 
                    key={item.node.id}
                    title={item.node.title} 
                    image={item.node.variants.edges[0].node.image.transformedSrc}
                    price={item.node.variants.edges[0].node.priceV2.amount}/> }
             keyExtractor={item => item.node.id}
             numColumns={2}
             onEndReachedThreshold={1}
             onEndReached={() => {
                fetchMore({
                    query: PRODUCTS,
                    notifyOnNetworkStatusChange: true,
                    variables: {
                    productSize,
                    cursor: data.products.edges[data.products.edges.length - 1].cursor
                    },
                    updateQuery: (previousResult, { fetchMoreResult }) => {
                        console.log(previousResult.products.edges[25])
                        console.log(fetchMoreResult.products.edges[1])
                        const newEdges = fetchMoreResult.products.edges;
                        const pageInfo = fetchMoreResult.products.pageInfo;
            
                        return newEdges.length
                        ? {
                        //const newProducts = fetchMoreResult.products.edges.filter(item => item.node.variants.edges[0].node.image.transformedSrc)
                        products: {
                        __typename: previousResult.products.__typename,
                        edges: [...previousResult.products.edges, ...newEdges],
                        pageInfo,
                        }
                        }
                        : previousResult;
                }
                })
               }
              }
            /> }
)

Answer 1

This is an old question so you might have already figured it out:

Images are not required in products so there can be products without image you need to check if the image exist before using the image.