将边缘插入中继连接的正确方法是什么？答案

【问题标题】：What is the correct way to insert an edge into relay connection?将边缘插入中继连接的正确方法是什么？
【发布时间】：2019-10-23 14:44:42
【问题描述】：

我在中继 paginationContainer 组件中订阅了一条新记录。当它从后端检索新记录时，我以这种方式将其插入连接（在requestSubscription 的updater 选项内）：

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

当我在console.log(props.posts.edges) 中看到一个新的插入边缘时，它可以正常工作。然而，这个新插入边的cursor 参数是undefined，而它的node 参数本身就是一条记录，正如我所料。

我认为这是不正确的，因为连接中的每条边都必须有一个cursor。

将新边缘插入中继连接以使其包含cursor 的正确方法是什么？

【问题讨论】：

标签： connection graphql graphql-js relayjs relay

【解决方案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!
}

【讨论】：