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

Question

I have a query which gets me a list of notes and a subscription which listens and inserts new notes by altering the query. However the problem is the first note doesn't get added.

So let me add more detail, initially the query response with an object which contains an attribute called notes which is an array of 0 length, if we try and add a note the attribute gets removed. The note is created so if I refresh my application the query will return the note then If I try and add a note again the note gets added to the array in the query object.

Here is my notes container where I query for notes and create a new property to subscribe to more 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);

Any help would be great, thanks.

EDIT:

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

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

Another EDIT

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>
     )
   }
 }

Another edit:

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

Aventurine

can you show the code for the NotesQuery and the NotesAddedSubscription – Paver

@Paver I've updated my question – Aventurine

Answer 1

YAY got it to work, simply the new data sent down the wire needs to be the same shape as the original query.

e.g.

NotesQuery had this shape...

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

yet the data coming down the wire on the subscription had this shape.

subscription onNoteAdded {
  noteAdded {
    _id
    title
    desc
  }
}

notice shared & favourited are missing from the query on the subscription. If we added them it would now work.

This is the problem, react-apollo internally detects a difference and then doesn't add the data I guess It would be useful if there was a little more feed back.

I'm going to try and work with the react-apollo guys to see if we can put something like that in place.

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

Aventurine