将边插入继电器连接的正确方法是什么？

Question

I have a subscription for a new records in my relay paginationContainer component. When it retrieves a new record from backend I insert it into connection this way (inside an updater option of requestSubscription ):

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

It works correctly as i see a new inserted edge in console.log(props.posts.edges) . However a cursor parameter of this new inserted edge is undefined while it's node parameter is a record itself, as i expect.

I think it is not correct as each edge in connection must have a cursor .

What is the correct way to insert a new edge into Relay connection so it includes a cursor ?

Answer 1

Every edge must have a cursor, and it should normally be provided by the server. Which means a subscription or mutation returning a node that could be part of an edge, should also provide the cursor.

There are two main approaches for this. If it's only possible for a connection to be sorted in one way (thereby guaranteeing the same node always has the same cursor), you can just return the entire edge type:

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

type MyMutationPayload {
    edge: PostEdge!    
}

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

If a connection can be sorted in multiple ways (eg by title, publication date, author), then the cursor is vary per sort option, which means you can't return the edge itself, but you can instead return the necessary information to construct the edges in the client updater:

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