React Native Shopify StoreFront API GraphQL API Бесконечная загрузка продуктов fetchMore error - PullRequest
1 голос
/ 21 июня 2020

Я использую 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;
                }
                })
               }
              }
            /> }
)

введите описание изображения здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...