CODEWITHSUNDEEP
javascriptreactjsgraphqlreact-apolloapollo-client
pri
pri

Reputation: 630

missing fields '_id', 'owner', 'meta' and 'comment' while updating the UI optimistically

I am trying to update the UI optimistically and I am using props and update function for that. However I get a warning like missing fields '_id', 'owner', 'meta' and 'comment'. I have attached the warning screenshot as well. How do I solve the following issue?

enter image description here

Here is the code 

    const withMutations = graphql(CommentMutation, {
  options: () => ({
    ...getDefaultOptions('collaboration')
  }),
  props: ({ ownProps, mutate }) => {
    return {
    submitComment: ({ value }) =>
      mutate({
        variables: {
          commentData: {
            comment: value
          }
        },
        optimisticResponse: {
          __typename: 'Mutation',
          addComment: {
            __typename: 'CommonResponse',
            _id       : -1,
            id        : null,
            comment   : value,
            meta      : ownProps.data[0].meta,
            owner     : ownProps.data[0].owner,
            status    : 'success',
            message   : 'Comment successfully added.',
            action    : 'AddComment',
          },
        },
//         optimisticResponse: {
//           __typename: 'Mutation',
//           addComment: {
//             __typename: 'CommonResponse',
//             id        : -1,
//             status    : 'success',
//             message   : 'Comment successfully added.',
//             action    : 'AddComment',
//           },
//         },
        update: (store, { data }) => {
          const data2 = store.readQuery({ query: CommentsQuery });
          data2.comments.unshift(data.addComment);
          store.writeQuery({ query: CommentsQuery, data: data2 });
        },
      }),
    };
  },
});

I have a full code here

https://gist.github.com/SanskarSans/907063ed9a27d3f38f7de25ca4072faf

Upvotes: 1

Views: 883

Answers (1)

MrLoh
MrLoh

Reputation: 466

Well you will have to pass something. Just use shortId to generate a temporary ID for example. The optimistic data is rolled back when the data from the server arrives, so that’s not an issue. If you don’t know the comment yet and have properly declared the prop as optional, just declare it as null in the optimistic response.

Upvotes: 2

Related Questions