@alexmc81

Не понимаю почему не получается применить optimistic ui при добавлении коментария?

Здравствуйте, проблема в том что при попытке при помощи параметра update компонента Mutation сразу добавить созданный комментарий в список комментариев из базы, получаю вот такие ошибки :
Missing field _id in {
"video": "5c7e28fa34238b298846c82e",
"user": "alex",
"comment": "Комментарий",
"__

Missing field createdDate in {
"video": "5c7e28fa34238b298846c82e",
"user": "alex",
"comment": "Комментарий",
"__

Вот соответствующий код

Схема комментария graphql

type VideoComment {
        _id: ID
        comment: String!
        createdDate: String
        video: String!
        user: String!
    }


Запрос в схеме

getVideoComments(video: String!): [VideoComment]

Запрос в react-apollo

export const ADD_VIDEO_COMMENT = gql`
  mutation($video: String!, $user: String!, $comment: String!) {
    addVideoComment(video: $video, user: $user, comment: $comment) {
      video
      user
      comment
    }
  }
`;


Компонент react отправляющий запрос

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Mutation } from 'react-apollo';
import { ADD_VIDEO_COMMENT, GET_VIDEO_COMMENTS } from '../../../queries';

import Error from '../Error/Error';
import withSession from '../../../hoc/withSession';

const initialState = {
  user: '',
  comment: '',
};

class AddComment extends Component {
  state = {
    ...initialState,
  };

  clearState = () => {
    this.setState({ ...initialState });
  };

  validateForm = () => {
    const { comment } = this.state;
    const isInvalid = !comment;
    return isInvalid;
  };

  changeHandler = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

  submitHandler = (event, addVideoComment) => {
    event.preventDefault();
    addVideoComment()
      .then(({ data }) => {
        console.log(data);
        this.clearState();
      })
      .catch(err => {
        console.log(err.message);
      });
  };

  updateCache = (cache, { data: { addVideoComment } }) => {
    console.log(addVideoComment);
    const { video } = this.props;
    const { getVideoComments } = cache.readQuery({
      query: GET_VIDEO_COMMENTS,
      variables: { video },
    });
    cache.writeQuery({
      query: GET_VIDEO_COMMENTS,
      variables: { video },
      data: {
        getVideoComments: [addVideoComment, ...getVideoComments],
      },
    });
  };

  componentDidMount() {
    if (this.props.session.getCurrentUser) {
      const { userName } = this.props.session.getCurrentUser;
      this.setState({
        user: userName,
      });
    }
  }

  render() {
    const { user, comment } = this.state;
    const { video } = this.props;
    return (
      <Mutation
        mutation={ADD_VIDEO_COMMENT}
        variables={{ video, user, comment }}
        update={this.updateCache}>
        {(addVideoComment, { data, loading, error }) => {
          return (
            <div>
              {error && <Error error={error} />}
              <form
                onSubmit={event => this.submitHandler(event, addVideoComment)}>
                <textarea
                  name='comment'
                  placeholder='Ваш комментарий'
                  cols='30'
                  rows='10'
                  value={comment}
                  onChange={this.changeHandler}
                />
                <button type='submit' disabled={loading || this.validateForm()}>
                  Добавить комментарий
                </button>
              </form>
            </div>
          );
        }}
      </Mutation>
    );
  }
}

В принципе из ошибок понятно, что при создании комментария, только что созданному объекту в кэше не хватает параметров _id и createdDate. Но как их можно передать в кэш, если они создаются уже в бд после добавления комментария?
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 1
@alexmc81 Автор вопроса
Спасибо за ответ, но теперь при передаче в mutation addVideoComment _id: -1 получаю вот такую ошибку при добавлении комментария - GraphQL error: VideoComment validation failed: _id: Cast to ObjectID failed for value "-1" at path "_id"

updateCache = (cache, { data: { addVideoComment } }) => {
    console.log(addVideoComment);
    const { video } = this.props;
    const { getVideoComments } = cache.readQuery({
      query: GET_VIDEO_COMMENTS,
      variables: { video },
    });
    cache.writeQuery({
      query: GET_VIDEO_COMMENTS,
      variables: { video },
      data: {
        getVideoComments: [addVideoComment, ...getVideoComments],
      },
    });
  };

  render() {
    const { user, comment } = this.state;
    const { video } = this.props;
    return (
      <Mutation
        mutation={ADD_VIDEO_COMMENT}
       variables={{ _id: -1, video, user, comment, createdDate: new Date() }}
        update={this.updateCache}>
        {(addVideoComment, { data, loading, error }) => {
          return (
            <div>
              {error && <Error error={error} />}
              <form
                onSubmit={event => this.submitHandler(event, addVideoComment)}>
                <textarea
                  name='comment'
                  placeholder='Ваш комментарий'
                  cols='30'
                  rows='10'
                  value={comment}
                  onChange={this.changeHandler}
                />
                <button type='submit' disabled={loading || this.validateForm()}>
                  Добавить комментарий
                </button>
              </form>
            </div>
          );
        }}
      </Mutation>
    );
  }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы