How to update a paginated list after a mutation?
I'll have a crack at this.
Without seeing the mutation I'll presume that it looks something like the following.
mutation NewMessage($message: String!, $threadId: ID!) {
sendMessage(message: $message, threadId: $threadId) {
...messageInfo
}
}
If that is the case, it's potentially unreliable to infer where in the connection the message should go. Since cursors are opaque strings we can't be certain that this message should indeed come after the latest message.
Instead I'd try something like the following.
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 }
}
}
}
}
This connection should include the new message and any others that have been added since.
Here is the official documentation on the @connection
directive: https://www.apollographql.com/docs/react/advanced/caching/#the-connection-directive