(Updated with more explanations)
There are 3 ways to represent an array of data in GraphQL:
- List: Use when you have a finite list of associated objects that you're fine fetching all at once. In GraphQL SDL, this is represented as
[Ship]
.
- Nodes: Use when you need to paginate over a list, usually because there can be thousands of items. Note that this is not part of the Relay specification and as such is not supported by the Relay client (instead, you'd wrap the item in an edge as described in #3), but some other clients such as Apollo are more flexible and support this construct (but you need to provide more boilerplate). In GraphQL, this would be represented as
type ShipConnection { nodes: [Ship], pageInfo: PageInfo! }
.
- Edges: Use when, in addition to pagination, you also need to provide extra information for each edge in the connection (read below for more details). In GraphQL, you'd write it as
type ShipConnection { edges: [ShipEdge], pageInfo: PageInfo! }
.
Note that your GraphQL server might support all three options for a specific association, and the client then selects which field they want. Here's how they'd all look together:
type Query {
ships: [Ship] // #1
shipsConnection: [ShipConnection]
}
type ShipConnection {
nodes: [Ship] // #2
edges: [ShipEdge] // #3
pageInfo: PageInfo!
}
type PageInfo {
endCursor // page-based pagination
hasNextPage
}
type ShipEdge {
cursor: String! // edge-based pagination
node: Ship
// ... edge attributes
}
type Ship {
// ... ship attributes
}
Lists (#1) should only ever be used when you know that the number of items won't grow (for example, if you have a Post
, you may want to return tags
as a List, but you shouldn't do that with comments
). To decide between #2 and #3, there are two reasons for using edges over just plain nodes:
It's a place for edge-specific attributes. For example, if you have a User
that belongs to many Group
s, in a relational database you'd have a UserGroup table with user_id
and group_id
. This table can have additional attributes like role
, joined_at
etc. The GroupUserEdge
would then be the place where you could access these attributes.
Have a place for the cursor. Relay, in addition to page-based pagination (using pageInfo
) supports edge-based pagination. Why does Relay need a cursor for each edge? Because Relay intelligently merges data requirements from your entire app, it may already have a connection with the same parameters you're requesting but not enough records in it. To fetch the missing data, it can ask for data in the connection after some edge's cursor.
I understand it may be confusing, considering databases have cursors, too, and there is only one cursor per query. A Relay connection is not a query really, it's rather a set of parameters that identify a query. A cursor of connection's edge is a set of parameters that identify a position within a connection. This is a higher abstraction level than a pure query cursor (remember that edges need to be able to identify a position even over a connection that might not be a DB query, or be hidden by a 3rd party system). Because of this required flexibility, one cursor for a connection would not be enough.