GraphQL: What, Why and How with Dotnet Core
In the article, we will see how to implement GraphQL with asp.net core and entity framework.
What?
GraphQL is an API design architecture just like the REST. It’s a query language for API that means it lets the client using the API to query the data as per their need and requirement.
Client 🗣 : I just want the name and height of the hero.
Server 🗣 : You got it.
Client 🗣 : I think, I want mass also. Can you provide me that too with the same endpoint, I don’t want to make a new call to you for the same.
Server 🗣 : You got it! Here’s the data you asked for with the same endpoint no change I promise.
Why?
With Rest, GET becomes tough when a client asks for related resources. REST server always falls into one of the categories either it will over-feed the client or under-feed the client. That means fields that are not necessary from a resource could be provided or fewer fields could be provided.
The client just wants to show the posts data and the user name of the user who created the post, with REST you will have to make two calls to get the data:
- GET : api/v1/posts
- GET : api/v1/users/{userId}
Or
Something kind of hack which will give Post+User data in one call.
REST has always been great but I see there are few improvements that we can achieve with GraphQL.
- GraphQL: Never have over or under-feeding problems. The client decides what it wants from the Server.
- GraphQL: Server round trips are reduced.
- GraphQL: A Client has the ability to change the UI without waiting for a new endpoint to be developed by the Server to get some more or fewer data.
How?
There are few terms you will have to know before implementing it. I will try to cover the ones that are must to implement a GraphQL API. For the rest, you will have to dig into their official documentation.
Queries: To fetch data from the server, the client sends a special object specifying the data it needs.
Mutations: Way to modify the server-side data.
Schema: It's the type system of GraphQL, it describes what data can be queried.
Let’s start the implementation
Setup the project
Create a blank asp.net core project.
Setup data layer
We will use the entity framework for data access. Create entities and their relation and set up the database in the startup file.
Do the migration and the database is ready to use.
Add-Migration -Name InitialMigration -OutputDir "Database/Migrations" -StartupProject "Blog" -Project "Blog"Add GraphQL
Add the required NuGet packages.
<PackageReference Include="GraphQL" Version="3.3.2" /><PackageReference Include="GraphQL.EntityFramework" Version="11.0.0" /><PackageReference Include="GraphQL.NewtonsoftJson" Version="3.3.2" />
Next, create the graphs that will be mapped with the Entities, schema to define the types, and the query.
- PostGraph: It contains the mapping with Post Entity
- UserGraph: It contains the mapping with User Entity.
- GraphQLQuery: Defines the query for the client.
- GraphQLSchema: Defines the schema for the query.
- GraphQLUserContext: It stores the database context or some more information like logged-in user etc for later use.
Next, we need to register our dependencies in the startup file.
PS- It also contains the code to seed initial data in the database.
Create Controller
Let’s wire up the controller for GraphQL.
Vallah, we are all set to test our GraphQL API.
Wait, there is an amazing Nuget package that provides a beautiful interface to use GraphQL API. Let’s add that package.
<PackageReference Include="GraphQL.Server.Ui.Playground" Version="4.4.1" />Configure it in the middleware.
app.UseGraphQLPlayground();app.UseMvc();
Run the app and go to the URL: http://localhost:5101/ui/playground
Write the query to fetch the data from the server.
query {
posts {
title
user {
name
email
}
}
}
Github Repository
You can find the complete code on my Github repository:
Make sure to refer ‘dev’ branch if you want to use SQL Server as a database, as the main branch is using Postgres database.
You can check out the hosted version of my on the below URL:
Conclusion
It might seem at first that lots of steps are involved in setting up the whole system but rest assured that once you set it up, everything would seem easier later on. The best part is that you don’t have to change every time the Server if some new information is required by the front end.
Next, I will use Vue Js to call the GraphQL APIs in my next article.
