Version: v11.0.0
Rendering Connections
In Relay, in order to display a list of data that is backed by a GraphQL connection, first you need to declare a fragment that queries for a connection:
- In the example above, we're querying for the
friends
field, which is a connection; in other words, it adheres to the connection spec. Specifically, we can query theedges
andnode
s in the connection; theedges
usually contain information about the relationship between the entities, while thenode
s are the actual entities at the other end of the relationship; in this case, thenode
s are objects of typeUser
representing the user's friends. - In order to indicate to Relay that we want to perform pagination over this connection, we need to mark the field with the
@connection
directive. We must also provide a static unique identifier for this connection, known as thekey
. We recommend the following naming convention for the connection key:<fragment_name>_<field_name>
. - We will go into more detail later as to why it is necessary to mark the field as a
@connection
and give it a uniquekey
in our Updating Connections section.
In order to render this fragment which queries for a connection, we can use the usePaginationFragment
Hook:
usePaginationFragment
behaves the same way as auseFragment
(see the Fragments section), so our list of friends is available underdata.friends.edges.node
, as declared by the fragment. However, it also has a few additions:- It expects a fragment that is a connection field annotated with the
@connection
directive - It expects a fragment that is annotated with the
@refetchable
directive. Note that@refetchable
directive can only be added to fragments that are "refetchable", that is, on fragments that are onViewer
, onQuery
, on any type that implementsNode
(i.e. a type that has anid
field), or on a@fetchable
type.
- It expects a fragment that is a connection field annotated with the
- It takes two Flow type parameters: the type of the generated query (in our case
FriendsListPaginationQuery
), and a second type which can always be inferred, so you only need to pass underscore (_
).
Is this page useful?