Как правильно вставить ребро в релейное соединение?

Question

У меня есть подписка на новые записи в моем компоненте реле paginationContainer.Когда он извлекает новую запись из бэкэнда, я вставляю ее в соединение следующим образом (в опции updater requestSubscription):

const newEdge = ConnectionHandler.createEdge(
  store,
  connection,
  newPostNode,
  'posts'
)
ConnectionHandler.insertEdgeBefore(connection, newEdge)

Она работает правильно, так как я вижу новый вставленный край в console.log(props.posts.edges).Однако параметр cursor этого нового вставленного ребра равен undefined, тогда как параметр node является самой записью, как я и ожидаю.

Я думаю, что это неверно, поскольку каждое ребро в соединении должно иметьcursor.

Как правильно вставить новое ребро в соединение реле, чтобы оно включало cursor?

Answer 1

У каждого ребра должен быть курсор, и он обычно должен быть предоставлен сервером.Это означает, что подписка или мутация, возвращающая узел, который может быть частью ребра, также должны обеспечивать курсор.

Для этого есть два основных подхода.Если соединение может быть отсортировано только одним способом (таким образом гарантируется, что один и тот же узел всегда имеет один и тот же курсор), вы можете просто вернуть весь тип ребра:

type PostEdge {
    node: Post!
    cursor: String!
}

type MyMutationPayload {
    edge: PostEdge!    
}

type Mutation {
    newPost(input: NewPostInput!): MyMutationPayload!
}

Если соединение можно отсортироватьнесколькими способами (например, по названию, дате публикации, автору), затем курсор меняется в зависимости от параметра сортировки, что означает, что вы не можете вернуть само ребро, но вместо этого вы можете вернуть необходимую информацию для построения ребер в клиентском модуле обновления:

enum PostSort {
    NEWEST_FIRST
    AUTHOR_AZ
    TITLE_AZ 
}

type PostCursors {
    sortKey: PostSort!
    cursor: String!
}

type MyMutationPayload {
    node: Post!
    cursors: [PostCursors!]!
}

type Mutation {
    newPost(input: NewPostInput!): MyMutationPayload!
}