Я использую ApolloClient из apollo-boost для подключения к Shopify StoreFront API, graphql-tag для создания моих запросов и useQuery 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;
}
})
}
}
/> }
)
введите описание изображения здесь