React Native Shopify StoreFront API GraphQL API 无限加载产品 fetchMore 错误答案

【问题标题】：React Native Shopify StoreFront API GraphQL API Infinite Loading Products fetchMore errorReact Native Shopify StoreFront API GraphQL API 无限加载产品 fetchMore 错误
【发布时间】：2020-10-11 13:17:47
【问题描述】：

我正在使用来自 apollo-boost 的 ApolloClient 与 Shopify StoreFront API 连接，使用 graphql-tag 来构建我的查询并使用 Query React Hook 将产品无限加载到 FlatList 中。

当我尝试将对象的值作为道具传递给产品组件时，我能够根据返回值加载组件，但最多只能加载大约 25 个产品对象（使用 useQuery 或使用 fetchMore）我得到了这个错误：null is not an object (evaluating: 'item.node.variants.edges[0].node.image.transformedSrc) 25 个产品后

虽然我能够记录返回的产品值，但我仍然收到错误。

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;
                }
                })
               }
              }
            /> }
)

【问题讨论】：

标签： react-native graphql expo apollo-client

【解决方案1】：

这是一个老问题，所以你可能已经想通了：

产品中不需要图片，因此可能存在没有图片的产品，您需要在使用图片之前检查图片是否存在。

【讨论】：