Apollo GraphQL реагирует на мутацию, не обновляя интерфейс должным образом - PullRequest
Новая
       30

Apollo GraphQL реагирует на мутацию, не обновляя интерфейс должным образом

1 голос
/ 15 апреля 2020

У меня есть крайний случай, когда моя apollo-graphql реагирующая мутация не обновляет пользовательский интерфейс должным образом, но только если массив edges изначально пуст.

Я пытаюсь добавить новый комментарий Ответьте на родительский комментарий и добавьте новый в список после того, как была сделана мутация. Это работает, когда уже есть хотя бы один существующий ответ на комментарий, но добавление первого никогда не обновляется после мутации, пока я не перефразирую sh страницу.

Вот функция мутации 

...

const queryVariables = {
  last: 2,
  parentId: comment.id,
  sortBy: "MODIFIED_AT_ASC",
};

const [createPostComment] = useMutation(CREATE_POST_COMMENT, {
  update(cache, { data: { createComment } }) {
    const { allComments } = cache.readQuery({
      query: GET_COMMENT_CHILDREN,
      variables: queryVariables,
    });

    cache.writeQuery({
      query: GET_COMMENT_CHILDREN,
      variables: queryVariables,
      data: {
        allComments: {
          ...allComments,
          edges: allComments.edges.concat({ // if this is empty, it doesn't update
            node: createComment.comment,
            __typename: "CommentEdge",
          }),
        },
      },
    });
  },
});

createPostComment({
    variables: {
    input: {
      parentId: comment.id,
      userPostId: comment.userPost.id,
      appUserId: 1,
      content: content,
    },
  },
});

...

Вот мутация CREATE_POST_COMMENT 

import gql from "graphql-tag";

import { CommentFragment } from "gql/fragments";

export const CREATE_POST_COMMENT = gql`
  mutation CreatePostComment($input: CommentInput!) {
    createComment(input: $input) {
      comment {
        ...CommentFragment
        userPost {
          id
        }
        children {
          edges {
            node {
              ...CommentFragment
              userPost {
                id
              }
            }
          }
        }
      }
    }
  }
  ${CommentFragment}
`;

И GET_COMMENT_CHILDREN запрос 

import gql from "graphql-tag";

import { CommentFragment } from "gql/fragments";

export const GET_COMMENT_CHILDREN = gql`
  query allCommentChildren(
    $last: Int!
    $before: String
    $sortBy: [CommentObjectSortEnum]!
    $parentId: Int!
  ) {
    allComments(
      last: $last
      before: $before
      sort: $sortBy
      filters: { parentId: $parentId }
    ) {
      pageInfo {
        startCursor
        hasPreviousPage
      }
      edges {
        node {
          ...CommentFragment
          userPost {
            id
          }
        }
      }
    }
  }
  ${CommentFragment}
`;

Фрагмент комментария 

export const CommentFragment = gql`
  fragment CommentFragment on CommentObject {
    id
    content
    createdAt
    parentId
  }
`;

Почему это работает нормально, когда ответ на комментарий уже существует, но только если edges изначально пуст?

...