Hot Chocolate GraphQL Pagination Using Cursor Technique[.NET 6]
source link: https://www.learmoreseekmore.com/2022/01/dot6-hotchocolate-graphql-pagination-using-cursor-technique.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
GraphQL Cursor Paging:
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.dotnet new webapi -o Your_Project_Name
Sample Table Data:
Setup EntityFramework Core Database Context:
Install-Package Microsoft.EntityFrameworkCore -Version 6.0.1
dotnet add package Microsoft.EntityFrameworkCore --version 6.0.1
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 6.0.1
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 6.0.1
- 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; }
- 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.
- "ConnectionStrings": {
- "MyWorldDbConectiton":"Your_ConnectionString_Value"
Register the database context into the 'Program.cs'.
- builder.Services.AddDbContext<MyWorldDbContext>(options =>
- options.UseSqlServer(builder.Configuration.GetConnectionString("MyWorldDbConectiton"));
Install Hot Chocolate NuGet Package:
Install-Package HotChocolate.AspNetCore -Version 12.5.0
dotnet add package HotChocolate.AspNetCore --version 12.5.0
[UsePaging] GraphQL Attribute:
Create GraphQL Query Entity:
- 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:
- 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:
- query{
- todo(first:4) {
- edges{
- node {
- 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.
- query{
- todo(first:2 after: "Mw==") {
- edges{
- node {
- itemName,
- isCompleted
- cursor
- pageInfo {
- hasNextPage
- hasPreviousPage
- startCursor
- endCursor
- query{
- todo(last:2, before: "Mw==") {
- edges{
- node {
- itemName,
- isCompleted
- cursor
- pageInfo {
- hasNextPage
- hasPreviousPage
- startCursor
- endCursor
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Follow Me:
Recommend
-
41
In this post, we will look at different pagination techniques and types of pagination components that are typically used in an app and how you can use Hasura GraphQL queries effectively for each use case.
-
10
Testing cursor-based pagination with Webmock Once upon a time I was working on importing orders from a phased out Shopify shop instance into an existing system. The application was already interacting with a new shop instance. Th...
-
4
Introduction Recently, I made a pull request on Gith...
-
8
-
83
Say hello to Hot Chocolate 12! ・ September 27, 2021 ・ 29 min readToday we are releasing Hot Chocolate 12, which brings many new features and refinements to the platform. The main focus for this release was to put a new e...
-
27
A Holly Jolly Christmas with Hot Chocolate 12.4 ・ December 14, 2021 ・ 13 min readChristmas is almost here! With the beginning of the festivities, more and more people are taking off from work. But at ChilliCream, we are...
-
5
👋 Introduction The Database is one of the cornerstones of every application. It's where you store everything your app needs to remember, compute later, or display to other users online. It's all fun and games until the databa...
-
3
IntroductionEarlier this month, we announced that we would be changing our API's pagination method from offset to cursor-based. These are two terms that don’t necessarily come up in everyone’s day-to-day, so we made this...
-
6
NestJS Graphql Cursor Based pagination · GitHub Thanks for the example but this code works fine only when the sorting is ASC, otherwise ha...
-
47
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK