Question

我正在开发Reddit风格的应用程序，为此我正在使用Apollo-GQL订阅。我正在尝试测试特定的订阅，每次将新的“帖子”添加到后端时，我都会立即将其显示在前端。但是，每次我在后端添加帖子时，即使数据库更新一次，它也会在前端显示两次。我不确定为什么会这样，将不胜感激。

以下是我显示帖子供稿的代码：

import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import Discussion from "./Discussion";

const DISCUSSION_QUERY = gql`
    query {
        discussionMany {
            _id
            title
            body
            creator {
                username
            }
            date_created
        }
    }
`;

const DISCUSSION_SUBSCRIPTION = gql`
    subscription {
        discussionCreated {
            _id
            title
            body
            creator {
                username
            }
            date_created
        }
    }
`;

function Discussions() {
    const { subscribeToMore, ...result } = useQuery(DISCUSSION_QUERY);
    return (
        <Discussion
            {...result}
            subscribeToNewDiscussion={() => {
                subscribeToMore({
                    document: DISCUSSION_SUBSCRIPTION,
                    updateQuery: (prev, { subscriptionData }) => {
                        if (!subscriptionData.data) {
                            return prev;
                        }

                        const newDiscussion =
                            subscriptionData.data.discussionCreated;

                        // TODO: find a less kludgy way to prevent duplicate store updates

                        const idAlreadyExists =
                            prev.discussionMany.filter((item) => {
                                return item._id === newDiscussion._id;
                            }).length > 0;

                        if (idAlreadyExists) {
                            return prev;
                        }

                        const final = Object.assign({}, prev, {
                            discussionMany: [
                                ...prev.discussionMany,
                                newDiscussion,
                            ],
                        });

                        return final;
                    },
                });
            }}
        />
    );
}

export default Discussions;

这是每个帖子的代码：

import React, { useEffect } from "react";

import { DiscussionTitle, DiscussionBody } from "./Discussion.styles";

function Discussion(props) {
    useEffect(() => {
        props.subscribeToNewDiscussion();
    });

    if (props.loading) return <h1>Loading...</h1>;
    if (props.error) return <h1>Something went wrong...</h1>;

    const discussions = props.data.discussionMany.map((post) => {
        return (
            <div key={Math.random() * 100}>
                <DiscussionTitle>{post.title}</DiscussionTitle>
                <DiscussionBody>{post.body}</DiscussionBody>
            </div>
        );
    });

    return <div>{discussions}</div>;
}

export default Discussion;

我们将非常感谢您的帮助，并在需要时详细介绍任何部分。谢谢！

Apollo GraphQL订阅：后端更新后显示无关项目

0 个答案: