• Use the API and before long you'll come across a list of some sort. These lists are usually paginated, and when they are we call them connections.

    Introducing Connections

    A connection is essentially a list that has a standard interface for pagination.
    Connections originated in the relay spec and have since been adopted by the graphql community as a best practice.

    Each connection can take these 4 arguments:

    • first (give me the first x projects)
    • after (first x projects after this cursor)
    • last (give me the last x projects)
    • before (last x projects before this cursor)

    Note: first and last may have upper limits, which can vary depending on the connection. These limits will be mentioned in the argument description, which can be found in the schema reference or GraphiQL's documentation panel.

    Each connection has two children:

    • pageInfo, which includes information required for further pagination such as cursors
    • edges, which is a list of edges, each representing an object in the list

    Let's look at a connection within the context of Marvel.
    This query will fetch a user's first 3 projects:

    {
      user {
        projects(first: 3) {
          pageInfo {
            hasNextPage
            endCursor
          }
          edges {
            cursor
            node {
              pk
              name
            }
          }
        }
      }
    }
    

    In this example, the return type of projects is a ProjectConnection.

    Here we're passing first: 3 which tells the server to return the first 3 results. We're also asking the server if there are more results beyond this page (hasNextPage), and for the cursor of the final edge (endCursor).

    This example also requests a cursor value for each node, which we could then pass to before or after to start paginating at a specific point.

    In order to get the next page, we'd take the endCursor value and pass it to projects as the after argument for our next query - asking the server to return the first 3 after the edge with this cursor.

    Similarly, we can paginate in the opposite direction by asking for the last 3 projects, and passing startCursor as before.