How to update a broken list after a mutation?

Question

I have a message list thread that is being called with a request GET_THREAD_MESSAGES. This request is paginated, and depending on whether the user saw the stream before or could not load the first page, last page or only new messages. (i.e. any of first/after/before/lastcan be passed with any values)

thread(id: "asdf") {
  messageConnection(after: $after, first: $first, before: $before, last: $last) {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

Now I have a mutation sendMessagethat I cause, and then in the method of updatethis mutation. I want to optimistically add this sent message to thread messages for a more convenient UX. Without pagination, I know that I would do something like:

const data = store.readQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId }
})

data.messageConnection.edges.push(newMessageEdge);

store.writeQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId },
  data,
})

, , store.readQuery : " messageConnection ", messageConnection({ after: 'jfds1223asdhfl', first: 50, before: null, last: null }). Apollo docs , @connection , . , - :

thread(id: "asdf") {
  messageConnection(...) @connection(key: "messageConnection") {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

, , , , , "Missing field cursor in { node: { id: '...', timestamp: '...'", , , , , a MessageConnectionEdge, node , , .

Apollo node , ? , ?

Answer 1

, , , . , , . (Facepalm)

TL; DR: , , !

:

subscribeToNewMessages: () => {
  return props.data.subscribeToMore({
    document: subscribeToNewMessages,
    variables: {
      thread: props.ownProps.id,
    },
    updateQuery: (prev, { subscriptionData }) => {
      const newMessage = subscriptionData.data.messageAdded;
      return Object.assign({}, prev, {
        ...prev,
        thread: {
          ...prev.thread,
          messageConnection: {
            ...prev.thread.messageConnection,
            edges: [
              ...prev.thread.messageConnection.edges,
              { node: newMessage, __typename: 'ThreadMessageEdge' },
            ],
          },
        },
      });
    },
  });
},

, : , Apollo Client ! , :

{ node: newMessage, cursor: newMessage.id, __typename: 'ThreadMessageEdge' }

, - , , , update!

Answer 2

.

, , :

mutation NewMessage($message: String!, $threadId: ID!) {
  sendMessage(message: $message, threadId: $threadId) {
    ...messageInfo
  }
}

, , . , , .

- .

mutation NewMessage(message: String!, threadId: ID!, $after: Cursor, first: Int) {

  sendMessage(message: $message, threadId: $threadId) {
    messageConnection(
      after: $after,
      first: $first,
      before: null,
      last: null
    ) @connection(key: "messageConnection") {
      edges {
        cursor
        node { ...messageInfo }
      }
    }
  }
}

, .

@connection: https://www.apollographql.com/docs/react/advanced/caching/#the-connection-directive