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

Posted 2023-03-08

【中文标题】React Native Shopify StoreFront API GraphQL API 无限加载产品 fetchMore 错误

【英文标题】：React Native Shopify StoreFront API GraphQL API Infinite Loading Products fetchMore error

【发布时间】：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;
                
                )
               
              
            /> 
)

【参考方案1】：

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

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