In this tutorial, we will walk you through the basics of creating a GraphQL server with Hot Chocolate. If you want to dig deeper into Hot Chocolate, we have our GraphQL workshop, which touches on topics like schema design, DataLoader, and many more things.
In this tutorial, we will teach you:
- To set up a GraphQL Server.
- To define a GraphQL schema.
- To query your GraphQL server.
Step 1: Create a GraphQL server project
Open your preferred terminal and select a directory where you want to add the code of this tutorial.
- Create an empty ASP.NET Core server project.
dotnet new web -n Demo
dotnet new sln -n Demo
dotnet sln add ./Demo
- Add the
HotChocolate.AspNetCore
package.
dotnet add ./Demo package HotChocolate.AspNetCore --version 11.0.0-rc.0
Step 2: Create a GraphQL schema
Next, we want to create a GraphQL schema. The GraphQL schema defines how we expose data to our consumers. To define the schema, open your favorite C# editor and let us get started.
- Add a new class
Author
.
namespace Demo
{
public class Author
{
public string Name { get; set; }
}
}
- Add a new class
Book
.
namespace Demo
{
public class Book
{
public string Title { get; set; }
public Author Author { get; set; }
}
}
We have a nice and simple model with these two classes that we can use to build our GraphQL schema. We now need to define a query root type. The query root type exposes all the possible queries that a user can drill into. A query root type can be defined as our models just with C#.
- Add a new class
Query
.
namespace Demo
{
public class Query
{
public Book GetBook() =>
new Book
{
Title = "C# in depth.",
Author = new Author
{
Name = "Jon Skeet"
}
};
}
}
Now, we have all the parts to create a valid GraphQL schema. Let us now head over to the Startup.cs
and configure our GraphQL schema.
- Add the GraphQL schema to the service configuration by adding the following code to the
ConfigureServices
method in theStartup.cs
.
public void ConfigureServices(IServiceCollection services)
{
services
.AddGraphQLServer()
.AddQueryType<Query>();
}
- Lastly, we need something to execute our code; for this, we will head over to the
Configure
method of ourStartup.cs
and addMapGraphQL
toUseEndpoints
.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app
.UseRouting()
.UseEndpoints(endpoints =>
{
endpoints.MapGraphQL();
});
}
Step 3: Execute a GraphQL query
Now that your server is finished let us try it out by executing a simple GraphQL query.
- Start your GraphQL server.
dotnet run --project ./Demo
- Open Chrome, Edge or Firefox and head over to
http://localhost:5000/graphql
to open the built-in GraphQL IDE Banana Cake Pop.
- Next, click on the
Book
icon on the left-hand navigation bar to explore the server GraphQL schema. In the schema explorer, we can see that we have one query root field exposed. By clicking on the field, we can drill into the schema structure.
- Head back to the query tab and execute your first GraphQL query by clicking the play button.
{
book {
title
author {
name
}
}
}
Summary
In this guide, we have learned how to set up a simple GraphQL server project and define a GraphQL schema with .NET.
Moreover, we explored our GraphQL schema with our GraphQL IDE Banana Cake Pop and executed a simple query to test our server.
If you want to dive deeper, you can start with our GraphQL tutorial to get into several topics around GraphQL and Hot Chocolate.
Further, you can learn more about defining GraphQL schemas in .NET here.