私は、投稿とそれらの投稿へのコメントを含む非常に単純なアプリに取り組んでいます。私は持っている
1) comment_mutation.js (サーバー側 - pubsub を使用して保存したコメントを公開しています)。不要なコードを削除しました
CommentCreateMutation: mutationWithClientMutationId({
name: 'CommentCreate',
inputFields: {
},
outputFields: {
commentEdge: {
type: GraphQLCommentEdge,
resolve: async ({ comment, postId }) => {
// Publishing change to the COMMENT_ADDED subscription.
await pubsub.publish(COMMENT_SUB.COMMENT_ADDED, { commentAdded: commentEdge, postId });
return commentEdge;
},
},
},
mutateAndGetPayload: () => {
// Save comment in DB
},
}),
2) CommentSubscription.js (サーバー側) - サブスクリプションを取得し、postId に基づいてフィルタリングします。
commentAdded: {
type: GraphQLCommentEdge,
args: {
postId: { type: new GraphQLNonNull(GraphQLID) },
...connectionArgs,
},
subscribe:
withFilter(
() => pubsub.asyncIterator(COMMENT_SUB.COMMENT_ADDED),
(payload, args) => payload.postId === args.postId
),
},
サーバー側は非常にうまく機能しています。コメントが作成されるたびに、結果がサブスクリプションに公開されます。サブスクリプションはそれをキャッチし、結果を表示します。
クライアント側:
1) CommentMutaton.js - クライアント側。ユーザー自身がクライアント側 (react native) でコメントを作成するたびに、ストアが非常にうまく更新されます。
const mutation = graphql`
mutation CommentCreateMutation($input:CommentCreateInput!) {
commentCreate(input: $input) {
commentEdge {
__typename
cursor
node {
id
_id
text
}
}
}
}
`;
const commit = (environment, user, post, text, onCompleted, onError) => commitMutation(
environment, {
mutation,
variables: {
input: { userId: user._id, userName: user.userName, postId: post._id, text },
},
updater: (store) => {
// Update the store
},
optimisticUpdater: (store) => {
// Update the store optimistically
},
onCompleted,
onError,
},
);
2) CommentSubscription.js (クライアント側)
const subscription = graphql`
subscription CommentAddedSubscription($input: ID!) {
commentAdded(postId: $input) {
__typename
cursor
node {
id
_id
text
likes
dislikes
}
}
}
`;
const commit = (environment, post, onCompleted, onError, onNext) => requestSubscription(
environment,
{
subscription,
variables: {
input: post._id,
},
updater: (store) => {
const newEdge = store.getRootField('commentAdded');
const postProxy = store.get(post.id);
const conn = ConnectionHandler.getConnection(
postProxy,
'CommentListContainer_comments',
);
ConnectionHandler.insertEdgeAfter(conn, newEdge);
},
onCompleted,
onError,
onNext,
}
);
export default { commit };
問題はクライアント側にあります。サーバー側でコメントを作成すると、クライアント側で最初のコメントが正しく表示されます。サーバー側で別のコメントを送信すると、クライアント側で 2 つの同じコメントが表示されます。3 回目にコメントを送信すると、クライアント側で同じコメントが 3 つ表示されます。それは意味しますか:
comment_mutation.js (サーバー側) が実行されるたびに、既存のサブスクリプションに加えて新しいサブスクリプションが作成されます。それが私が考えることができる唯一の論理的な説明です。
CommentMutation.js の updater 関数を (クライアント側で) コメントアウトしましたが、まだこのエラーが表示されます。どんな助けでも大歓迎です。