Enhancing GraphQL with Pagination, Filtering, and Sorting in .NET
Written on
Chapter 1: Introduction to Advanced Data Management
In our last discussion, we explored how to establish a connection to a database and retrieve data. However, updating data is just one of the many capabilities of GraphQL. One particularly exciting feature is subscriptions, which allow for real-time updates. But before we dive into these functionalities, it’s essential to gain more control over our data retrieval methods.
Let’s pick up from where we concluded in the previous article. If you're following along with the code, be sure to revisit it.
Section 1.1: Implementing Pagination
As we delve into more complex topics, we must address a key aspect we overlooked earlier: pagination. It’s common to prefer fetching a limited number of items, such as 10 instead of 100.
To achieve this, we need to introduce a specific annotation in our Query.cs file: [UsePaging]. Here’s how it looks:
public IQueryable GetTodos(ApplicationDbContext db) => db.Todos;
After running the application, you’ll notice how this is reflected in the schema; it utilizes a cursor-based approach. Let's put this to the test. The structure of the query changes slightly. We need to include pageInfo for pagination details and node for the fields we wish to return.
What does this signify? The encoded value MA== in Base64 translates to 0, representing a zero-based cursor. This indicates that we’re retrieving the first element. To access the subsequent items, we request entries that follow, which might seem a bit complex at first but is incredibly effective.
Notice that hasNextPage is now false, while hasPreviousPage is true. This means we can request items before the current result, similar to previous examples.
Section 1.2: Filtering Data
Consider a scenario where you have a table and need to filter data based on a specific column. For instance, if you have customer data and only want to retrieve individuals from the USA, Germany, or Japan, filtering becomes essential.
To enable filtering, you must add it in the Program.cs file using the AddFiltering method:
builder.Services
.AddGraphQLServer()
.AddFiltering() // new
.RegisterDbContext()
.AddQueryType();
Now, take a look at the schema reference. By clicking on it, you can select the column you wish to filter and witness the power of GraphQL’s filtering capabilities.
It’s time for action! Observe how the query is structured: we specify where, followed by the column and the sorting preferences. Even if pagination is not needed, it will automatically be included unless you specifically omit pageInfo.
Section 1.3: Sorting Data
In similar fashion, there are times when sorting data in either ascending or descending order is required. Fortunately, in Hot Chocolate, this process is quite straightforward.
The last step involves enabling sorting in Program.cs by employing the AddSorting method:
builder.Services
.AddGraphQLServer()
.AddFiltering()
.AddSorting() // new
.RegisterDbContext()
.AddQueryType();
Now, let’s test this feature. You can use ASC for ascending order and DESC for descending order—what a revelation!
Be mindful of how the query is constructed; ASC is not a string but an enum, so avoid using quotes. Since the order is represented as an array, we can easily implement multi-column sorting. However, this won’t have any effect unless we have at least two items at the same level, such as two shopping tasks with varying statuses.
If you found this information valuable and want to join our expanding community, don’t hesitate to hit the follow button and embark on this knowledge journey with us. Your thoughts and feedback are always welcome!
Chapter 2: Practical Demonstrations
In this video, we explore how to implement filtering within the GraphQL API using .NET and Hot Chocolate.
This video illustrates sorting capabilities within the GraphQL API in .NET with Hot Chocolate.
Thank you for reading! If you enjoyed this content, please consider showing your support by clapping and following the author! 👏 Stay connected on our other platforms: X | LinkedIn | YouTube | Discord.