Question

我正在尝试将fetchMore与react-infinite-scroll（https://www.npmjs.com/package/react-infinite-scroller）结合使用。它在大多数情况下都有效，但是我希望能够捕获服务器错误并进行处理。我正在与一项“限制”我的服务进行交谈，因此我想做的是等待1秒，然后重试。

我的问题是，如果未将错误引发到fetchMore中，则不知道在哪里处理该错误，因为该错误未传递到render函数中。

我尝试对fetchMore函数本身使用try / catch，但没有发现错误。

如果有帮助，我正在使用nextjs。

return (
    <Query query={GET_COLLECTION} variables={{ handle: collectionHandle, first: 10, orderBy: orderBy }}>
        {({ loading, error, data, fetchMore, refetch }) => {
            if (loading && !data.getCollection) return <CollectionListLoader />
            // Normally I refetch in handleError
            if (error) return handleError({ error, loader: <Loader fullscreen={true} type="logo" />, refetch })

            const collection = data.getCollection

            return (
                <InfiniteScroll
                    initialLoad={false}
                    loadMore={() => {
                        fetchMore({
                            query: GET_MORE_COLLECTION,
                            variables: { handle: collectionHandle, first: 10, after: collection.products[collection.products.length - 1].cursor, orderBy: orderBy },
                            updateQuery: appendQuery,
                        })
                    }}
                    hasMore={collection.productsHasNextPage}
                    loader={<Loader type="logo" key="loader" />}
                >
                    <div className="row">
                        {collection.products.map((p, i) => {
                            return (
                                <div className="col-6 col-md-4" key={i}>
                                    <Product product={p} collectionHandle={collectionHandle} />
                                </div>
                            )
                        })}
                    </div>
                </InfiniteScroll>
            )
        }}
    </Query>
)

实际：如果在fetchMore中引发了错误，则无限滚动器将无限期加载，而我无法处理该错误

预期：如果fetchMore中引发了错误，我会捕获并处理它

Answer 1

Apollo似乎没有对此进行记录，但是fetchMore返回了一个保证，因此您可以使用.catch()处理错误。

如何在fetchMore分页中错误处理？

1 个答案: