Hot Chocolate GraphQL Pagination Using Cursor Technique[.NET 6]

In this article, we are going to understand the Cursor Pagination technique in Hot Chocolate GraphQL.

GraphQL Cursor Paging:

In GraphQL we have cursor-based pagination. The cursors are opaque, either offset or ID-based pagination can be implemented.

In the cursor-base pagination based on request Graphql query response return 'Edges', 'PageInfo'(object).

Edges consist of an array of objects with properties like 'node', 'cursor'. So 'node' property holds single record data into it. 'cursor' is a base64 string that can be either made by the row number or record primary key id value. So each 'edge' contains 'node'(contains single record data) along with 'cursor', so using the 'cursor' value we can query our server to return the records either before or after the 'cursor' value.

PageInfo consist of  'hasNextPage', 'hasPreviousPage', 'startCursor', 'endCursor'.

Sample Query & Response of cursor pagination:

Create A .Net6 Web API Project:

Let's create a .Net6 Web API sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor.

.NET CLI Command:
dotnet new webapi -o Your_Project_Name

Sample Table Data:

Here I will show a Todo table with some data.

Setup EntityFramework Core Database Context:

Let's install the entity framework core NuGet package.

Package Manager:
Install-Package Microsoft.EntityFrameworkCore -Version 6.0.1

.Net CLI:
dotnet add package Microsoft.EntityFrameworkCore --version 6.0.1

Let's install the entity framework core SQL NuGet package.

Package Manager:
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 6.0.1

.Net CLI:
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.1

Let's create an entity that represents our 'Todo' table like 'Todo.cs'.

Data/Entities/Todo.cs:

namespace Dot6.HotChoco.Graphql.Paging.Demo.Data.Entities;

public class Todo
{
    public int Id { get; set; }
    public string ItemName { get; set; }
    public bool IsCompleted { get; set; }
}

Let's implement the Database context by creating an entity like 'MyWorldDbContext.cs'.

Data/MyWorldDbContext.cs:

using Dot6.HotChoco.Graphql.Paging.Demo.Data.Entities;
using Microsoft.EntityFrameworkCore;
namespace Dot6.HotChoco.Graphql.Paging.Demo.Data;
public class MyWorldDbContext : DbContext
{
    public MyWorldDbContext(DbContextOptions<MyWorldDbContext> context) : base(context)
    {
    }
    public DbSet<Todo> Todo{get;set;}
}

• (Line: 4) To make a plain class as database context, we have to inherit the 'Microsoft.EntityFrameworkCore.DbContext'.
• (Line: 9) Entities that represent our 'Todo' table will register inside of the database context.

Add the database connection string into the 'appsettings.Development.json'.

appsettings.Development.json:

"ConnectionStrings": {
   "MyWorldDbConectiton":"Your_ConnectionString_Value"
}

Register the database context into the 'Program.cs'.

Program.cs:

builder.Services.AddDbContext<MyWorldDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("MyWorldDbConectiton"));
});

Install Hot Chocolate NuGet Package:

Let's install the Hot Chocolate NuGet Package.

Package Manager:
Install-Package HotChocolate.AspNetCore -Version 12.5.0

.Net CLI:
dotnet add package HotChocolate.AspNetCore --version 12.5.0

[UsePaging] GraphQL Attribute:

In Hot Chocolate GraphQL implementing cursor, pagination is very simple, by decorating the [UsePaging]  attribute on the resolver method. So it will read all input fields like 'first', 'after', 'last', 'before' implicitly and use them against the return type of 'IQueriable' or 'IEnumerable' result set of the resolver.

Create GraphQL Query Entity:

So let's create GraphQL Query Entity in which we are going to implement our pagination resolver method. So let's create a query entity like 'TodoQuery.cs'

Queries/TodoQuery.cs:

using Dot6.HotChoco.Graphql.Paging.Demo.Data;
using Dot6.HotChoco.Graphql.Paging.Demo.Data.Entities;

namespace Dot6.HotChoco.Graphql.Paging.Demo.Queries;

public class TodoQuery
{

    [UsePaging]
    public IQueryable<Todo> GetTodo([Service] MyWorldDbContext myWorldDbContext)
    {
        return myWorldDbContext.Todo.OrderBy(_ => _.Id).AsQueryable();
    }
}

• (Line: 9) Decorated our resolver method with 'UsePaging' attribute.
• (Line: 10-13) Paging can be applied for return types like 'IQueryable', 'IEnumerable'. For good performance use the IQuerible return type because the pagination filters will be directly applied to the raw SQL query.

Register GraphQL Service And Endpoint:

Let's register the GraphQL service and endpoint middleware into the 'Program.cs'.

Program.cs:

using Dot6.HotChoco.Graphql.Paging.Demo.Data;
using Dot6.HotChoco.Graphql.Paging.Demo.Queries;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services
.AddGraphQLServer()
.AddQueryType<TodoQuery>();

var app = builder.Build();
// code hidden for display purpose
app.MapGraphQL();

app.Run();

• (Line: 7-9) Register our GraphQL service as well as our Query Entity.
• (Line: 13) Configured GraphQL endpoint.

Test Pagination Endpoint:

(1)The initial request simply uses the 'first' input filed. So the 'first' value represents how many records to fetch.

Initail GraphQL Query:

query{
  todo(first:4) {
    edges{
      node {
        id,
        itemName,
        isCompleted
      }
      cursor
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}

• (Line: 2) The 'first' input field specifies the number of records from starting. Here we want to fetch the first '4' records.
• (Line: 4-8) The 'node' we can request properties of our data.
• (Line: 9) The cursor is a base64 string of either the row number of the record or 'Id' property of the record inside of the node.

(2) Next page request we will use 'first', 'after' fields. So the 'after' field we have to pass the cursor value of a particular record so that server returns the record after the cursor value record up to the records count that is specified in the 'first'.

Next Page request query:

query{
  todo(first:2 after: "Mw==") {
    edges{
      node {
        id,
        itemName,
        isCompleted
      }
      cursor
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}

(3) Previous page requests we will use 'last' and 'before' fields. In the 'before' field we pass cursor value which means records before that cursor values needs to be fetched.

Previous Page request query:

query{
  todo(last:2, before: "Mw==") {
    edges{
      node {
        id,
        itemName,
        isCompleted
      }
      cursor
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}

Support Me!
Buy Me A Coffee PayPal Me

Video Session:

Wrapping Up:

Hopefully, I think this article delivered some useful information on Hot Chocolate GraphQL Pagination Using the cursor technique. using I love to have your feedback, suggestions, and better techniques in the comment section below.

Follow Me:

YouTube

Facebook

Twitter

Pinterest