How to implement pagination

[timpamungkas-bfi]

I've seen this article for pagination, but did not understand the implementation.
Any sample how to implements pagination on DGS?
Does DGS provides capability for pagination (or feature to do it)? I did not see any on the DGS homepage.

[sbilello]

https://www.graphql-java-kickstart.com/tools/relay/
I implemented the Datafetchers for a schema like this one. We discussed the ability to remove the code verbosity. I hope it helps

[paulbakker]

At Netflix we use the relay spec as well. I copied the following from an (internal) example, hopefully that helps a bit.
As you can see, we manually define the connection types in the schema, and use API in graphql-java to create the results in the datafetcher.

type Movie @key(fields: "movieId") @extends {
    movieId: Int! @external
    fakeReviews: FakeReviewConnection
}

type FakeReviewConnection {
    pageInfo: PageInfo!
    edges: [FakeReviewEdge]
}

type FakeReviewEdge {
    cursor: String!
    node: FakeReview
}

interface FakeReview {
    movie: Movie
    id: ID
    submittedBy: String
    postedDate: LocalDateTime
}

@DgsData(parentType = DgsConstants.MOVIE.TYPE_NAME, field = DgsConstants.MOVIE.FakeReviews)
    public CompletableFuture<FakeReviewConnection> recentReviewsOnMovie(DataFetchingEnvironment dfe) {
        Movie movie = dfe.getSource();
        DataLoader<Integer, List<FakeReview>> dataLoader = dfe.getDataLoader(ReviewDataLoader.class.getAnnotation(DgsDataLoader.class).name());
        return dataLoader.load(movie.getMovieId()).thenApply(this::createConnection);
    }

    /**
     * Creates a Connection (for pagination) from a list of reviews.
     * The Pagination spec goes into the details of how to use pagination.
     * For more information refer to <i href="https://manuals.netflix.net/view/studioedge/mkdocs/master/best-practices/pagination/">Studio Edge-Pagination Best Practices</i>.
     */
    private FakeReviewConnection createConnection(List<? extends FakeReview> reviews) {
        if(reviews.isEmpty()) {
            return new FakeReviewConnection(new DefaultPageInfo(null, null, false, false), null);
        }

        List<FakeReviewEdge> reviewEdges = reviews.stream().map(r -> new FakeReviewEdge(r.getId(), r)).collect(Collectors.toList());
        DefaultPageInfo pageInfo = new DefaultPageInfo(
                new DefaultConnectionCursor(reviewEdges.get(0).getNode().getId()),
                new DefaultConnectionCursor(reviewEdges.get(reviewEdges.size()-1).getNode().getId()), false, false);

        return new FakeReviewConnection(pageInfo, reviewEdges);
    }

[SquireOfSoftware]

Just wanted to add my two cents to this as the documentation is vague as hell for me regarding "nested" pagination connection objects.

So the first thing you want to do is add it to the schema:

type Query {
  movies(type: String): [Movie]
}

type Movie {
  name: String
  type: String
  director: Person
  actors(first: Int, after: String): PersonConnection
}

type Person @connection {
  name: String
  id: Int
}

Then you want to implement a subgraph DataFetcher that resolves for the Movie.actors step here: https://netflix.github.io/dgs/advanced/context-passing/
AND you want to implement the resolver that follows this schema here:
https://netflix.github.io/dgs/advanced/relay-pagination/
Or if you're lazy:

@DgsData(parentType = "Movie", field = "actors")
public Connection<Person> getActors(DataFetchingEnvironment env) {
    // of course here you can pick out the filter variables from the env variable
    Integer firstFilter = env.getArgument("first");
    String afterFilter = env.getArgument("after");
    Movie move = env.getSource();
    return new SimpleListConnection<>(PersonService.getActors(firstFilter, afterFilter, movie)).get(env);
}

And that should enable you to do queries like:

query getActorsFromIndieFilm {
  movies(type: "indie") {
    name
    actors(first: 10, after: "Johnny Wick") {
      edges {
        nodes {
          name
        }
      }
    }
  }
}

Hahahaha why is the documentation and tutorials so vague on this...I have no idea...but at least that helped me.

Places that use GraphQL pagination:

Shopify

https://shopify.dev/apps/tools/graphiql-admin-api
Take a look at their:

Shop.assignedFulfillmentOrders: FulfillmentOrderConnection!

Jira

https://developer.atlassian.com/platform/atlassian-graphql-api/graphql/
Take a look at their:

jira {
    allJiraProjects(cloudId: "a436116f-02ce-4520-8fbb-7301462a1674", filter: {types: [SOFTWARE]}) {

Github

https://docs.github.com/en/graphql/guides/using-the-explorer
Take a look at their:

query($number_of_repos:Int!){
  viewer {
    name
     repositories(last: $number_of_repos) {

[jandrade1]

@SquireOfSoftware thanks for sharing this example of how to use nested connection objects. This is how I also imagined it should work. However, I'm not able to get the generated types to compile successfully because, following your example, the Movie class would have an actors attribute of type PersonConnection which is not a known type since the codegen plugin does not generate code for those connection types. How did you get this to work? Did you have to implement your own PersonConnection class?

[SquireOfSoftware]

Sup @jandrade1,

which is not a known type since the codegen plugin does not generate code for those connection types

Not super sure what a "codegen plugin" is, I don't really use that in the GraphQL project that I have been tinkering away with.

Did you have to implement your own PersonConnection class?

No, I just followed the documentation here: https://netflix.github.io/dgs/advanced/relay-pagination/#set-up

The @connection directive automatically generated my PersonConnection entity for me when I ran Spring Boot.

But I will defer to the response from a proper maintainer of the DGS framework, as after all I am just a mere consumer of the framework 😛 and a maintainer would know better what is compatible with the framework:
#369 (comment)

[jandrade1]

hey @SquireOfSoftware, thanks for replying. The codegen plugin is used to generate code from the schema, instead of writing the code yourself. This plugin won't generate code for your connection objects (as confirmed by @srinivasankavitha ) so it looks like using the plugin's typeMapping is the way to go here.

[srinivasankavitha]

Actually codegen does not process the @connection directive since it is dynamically handled by the DGS framework. Also the types map to graphql-relay types (https://www.javadoc.io/doc/com.graphql-java/graphql-java/16.2/graphql/relay/package-summary.html) and so codegen will not generate them. You could try adding a typemapping in codegen config to map PersonConnection to the corresponding relay type to avoid the errors. Hope this helps.

Something like this, basically:

generateJava{
  ...
  typeMapping = ["PersonConnection": "graphql.relay.SimpleListConnection<Person>"]
}

[srinivasankavitha]

Thanks for the feedback. Will do!

[ruxiao16]

@jandrade1 Hey, I am also using the codegen plugin and added

generateJava{
  ...
  typeMapping = ["PersonConnection": "graphql.relay.SimpleListConnection<Person>"]
}

in the build.gradle file. project builds fine but I still do not see type PersonConnection being created. what version of codegen are you using may I ask?

[jandrade1]

Hey @ruxiao16 , I had actually previously mapped PersonConnection to graphql.relay.Connection<Person> and I had pointed out that the documentation was wrong. I stopped using the @connection directive because I had trouble with Federation so now I'm writing my own types directly in the schema. I just tried to use the connection directive and the related code did not generate for me, not sure why. I'm using version 5.6.3 of the plugin.

[srinivasankavitha]

Hi - the @connection directive generates the type dynamically and adds it to the schema at runtime. Codegeneration works only with static schemas, so it does not generate anything for @connection.

[ruxiao16]

Oh that makes sense thanks for the reply!