1

我有一个名为GraphQL Bookstore的示例应用程序，它创建书籍、出版商和作者并显示它们之间的关系。我正在使用订阅来实时显示更新。

出于某种原因，我的BOOK_ADDED订阅完全绕过了graphql包装器。它正在调用包装类，并将booksprop 设置为undefined. 代码的相关部分如下所示（您可以在此处查看完整代码）。

class BooksContainerBase extends React.Component {
    componentWillMount() {
        const { subscribeToMore } = this.props;
        subscribeToMore({
            document: BOOK_ADDED,
            updateQuery: (prev, { subscriptionData }) => {
                if (!subscriptionData.data) {
                    return prev;
                }

                const newBook = subscriptionData.data.bookAdded;

                // Don't double add the book
                if (!prev.books.find(book => book.id === newBook.id)) {
                    return Object.assign({}, prev, {
                        books: [...prev.books, newBook]
                    });
                } else {
                    return prev;
                }
            }
        });
    }

    render() {
        const { books } = this.props;
        return <BooksView books={books} />;
    }
}

...

export const BooksContainer = graphql(BOOKS_QUERY, {
    props: ({ data: { loading, error, subscribeToMore, books } }) => ({
        loading,
        error,
        subscribeToMore,
        books
    })
})(LoadingStateViewer(BooksContainerBase));

基本上，当客户端收到订阅通知时，updateQuery()会调用该函数 - 正如预期的那样。但是，一旦该函数退出，render()包装类的方法就会被直接调用并books设置为undefined。我预计graphql会调用包装器，在调用render()方法之前正确设置道具。我错过了什么？

提前致谢！

4

0 回答 0