从订阅中反应Apollo第一个对象而不是合并到它实际被删除的先前数据

时间:2017-04-09 08:29:00

标签: reactjs graphql apollo graphql-subscriptions

我有一个查询,它会获取一个注释和订阅列表,通过更改查询来侦听和插入新注释。然而问题是第一个注释没有被添加。

所以让我添加更多细节,最初是一个包含一个名为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

1 个答案:

答案 0 :(得分:0)

YAY让它发挥作用,只需在线路上发送的新数据需要与原始查询形状相同。

e.g。

NotesQuery有这种形状......

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

但订阅中的数据仍然存在这种形状。

subscription onNoteAdded {
  noteAdded {
    _id
    title
    desc
  }
}

请注意shared&amp;订阅查询中缺少favourited。如果我们添加它们,它现在可以工作。

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

我将尝试与react-apollo人一起工作,看看我们是否可以放置类似的东西。

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