reactjs - React Apollo サブスクリプションの最初のオブジェクトが以前のデータにマージされず、実際に削除される

Question

メモのリストを取得するクエリと、クエリを変更して新しいメモをリッスンして挿入するサブスクリプションがあります。ただし、問題は最初のメモが追加されないことです。

それでは、詳細を追加しましょう。最初は、長さ 0 の配列である notes という属性を含むオブジェクトを含むクエリ応答です。メモを追加しようとすると、属性が削除されます。メモが作成されるので、アプリケーションを更新すると、クエリはメモを返します。メモを再度追加しようとすると、クエリ オブジェクトの配列にメモが追加されます。

これは、メモをクエリし、新しいプロパティを作成して、より多くのメモをサブスクライブするメモ コンテナーです。

export const NotesDataContainer = component => graphql(NotesQuery,{

name: 'notes',
props: props => {

  console.log(props); // props.notes.notes is undefined on first note added when none exists.

  return {
    ...props,
    subscribeToNewNotes: () => {

      return props.notes.subscribeToMore({
        document: NotesAddedSubscription,
        updateQuery: (prevRes, { subscriptionData }) => {

          if (!subscriptionData.data.noteAdded) return prevRes;

          return update(prevRes, {
            notes: { $unshift: [subscriptionData.data.noteAdded] }
          });

        },
      })
    }
  }
}

})(component);

どんな助けでも素晴らしいでしょう、ありがとう。

編集：

export const NotesQuery = gql`
  query NotesQuery {
    notes {
      _id
      title
      desc
      shared
      favourited
    }
  }
`;

export const NotesAddedSubscription = gql`
  subscription onNoteAdded {
    noteAdded {
      _id
      title
      desc
    }
  }
`;

別の編集

class NotesPageUI extends Component {

  constructor(props) {

    super(props);

    this.newNotesSubscription = null;

  }

   componentWillMount() {

      if (!this.newNotesSubscription) {

      this.newNotesSubscription = this.props.subscribeToNewNotes();

      }

   }

   render() {

     return (
        <div>

          <NoteCreation onEnterRequest={this.props.createNote} />

            <NotesList
              notes={ this.props.notes.notes }
              deleteNoteRequest={    id => this.props.deleteNote(id) }
              favouriteNoteRequest={ this.props.favouriteNote }
            />

        </div>
     )
   }
 }

別の編集：

https://github.com/jakelacey2012/react-apollo-subscription-problem