React Apollo first object from subscription not being merge into previous data it actually gets removed

Question

我有一个查询可以获取笔记列表，还有一个订阅可以通过更改查询来侦听和插入新笔记。但是问题是第一个音符没有被添加。

所以让我添加更多细节，最初查询响应包含一个名为 notes 的属性的对象，该属性是一个长度为 0 的数组，如果我们尝试添加一个注释，该属性将被删除。注释已创建，因此如果我刷新我的应用程序，查询将 return 注释然后如果我尝试再次添加注释，注释将添加到查询对象的数组中。

这是我的笔记容器，我在其中查询笔记并创建一个新的属性以订阅更多笔记。

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

Answer 1

YAY 成功了，只是通过网络发送的新数据需要与原始查询的形状相同。

例如

NotesQuery 具有这种形状...

query NotesQuery {
  notes {
    _id
    title
    desc
    shared
    favourited
  }
}

然而通过订阅传输的数据具有这种形状。

subscription onNoteAdded {
  noteAdded {
    _id
    title
    desc
  }
}

注意订阅查询中缺少 shared 和 favourited。如果我们添加它们，它现在就可以工作了。

这就是问题所在，react-apollo 内部检测到差异，然后不添加数据我想如果有更多反馈会很有用。

我将尝试与 react-apollo 人员合作，看看我们是否可以将类似的东西放到位。

https://github.com/apollographql/react-apollo/issues/649

React Apollo first object from subscription not being merge into previous data it actually gets removed

React Apollo first object from subscription not being merge into previous data it actually gets removed

apollo

reactjs

graphql

graphql-subscriptions