\
## Learning Objectives

* How to add GraphQL wrapper
* How to use the NSwag tool to generate code

## Prerequisites

* Require “HotChocolate.AspNetCore” from the NuGet package.
* Require .Net 5 Framework.
* Visual Studio IDE.
* Understanding of .Net Web API project.
* Basic knowledge of Swagger UI.

## Getting Started

**GraphQL** allows you to ask for what you want in a single query, save bandwidth, and reduce requests.

### Step 1: Create a new project

Create a new project in [ASP.Net](http://ASP.Net) Core Web API template for this article demonstration, as shown below.

 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-5rb3vcd.png)

The problem of generating helpful documentation and help pages for Web APIs. Now .Net project is by default enabled with swagger, as shown on the localhost URL

\
 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-syc3vg0.png)

### Step 2: Add GraphQL packages

Install the “**HotChocolate.AspNetCore**” package from the NuGet gallery into the newly created solution in Visual Studio.

### Step 3: Generate Manifest file

Go to file explorer > project folder and run the following command using the Dotnet Global tool.

```
dotnet new tool-manifest
```

\
and Install the NSwag tool

```
dotnet tool install NSwag.ConsoleCore
```

### Step 4: Create swagger.json

Create a swagger JSON file in the project directory using the below command

```
curl <SwaggerJsonFilePath> > swagger.json
```

\
Click as highlighted below know the swagger JSON file path

 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-zcd3v31.png)

Example

```
curl https://localhost:44323/swagger/v1/swagger.json > swagger.json
```

### Step 5: Generate service files

Generate REST service file using the below command with respective namespace and class name.

```
dotnet nswag swagger2csclient 
/input:swagger.json 
/classname:<Clasname> 
/namespace:<Namespace>
/output:<OutputFile>
```

\
Example

```
dotnet nswag swagger2csclient 
/input:swagger.json 
/classname:RestClass
/namespace:RestNamespace 
/output:ToDoService.cs
```

### Step 6: Update the base URL

Update the base URL in generated “ToDoService” file.

 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-mxf3vd3.png)

### Step 7: Configure GraphQL Playground

Attach playground inside the ConfigureServices method in the “Startup.cs” file

```
public void ConfigureServices(IServiceCollection services){

services.AddHttpClient<RestClass>();
  services
   .AddRouting()
   .AddGraphQLServer()
   .AddQueryType<Query>();
}
```

\
Create GraphQL Query class as follows

```csharp
public class Query
{
	public async Task<ICollection<TodoReader.WeatherForecast>> GetTodosAsync(
		[Service] TodoService service,
		CancellationToken cancellationToken)
	{
		return await service.WeatherForecastAsync(cancellationToken);
	}

}
```

\
Map GraphQL in Configure method

```
app.UseEndpoints(endpoints =>
{
  endpoints.MapControllers();
  endpoints.MapGraphQL();
});
```

### Step 8: Run the playground

Browse the localhost URL at route “/graphql,” and the following GraphQL playground will be displayed.

 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-q3g3vda.png)

That’s it, successfully integrated GraphQL playground to the .Net REST API along with swagger.

### GitHub Sample

**[ssukhpinder/DotNetCoreRestApi](https://github.com/ssukhpinder/DotNetCoreRestApi)**[
\*Add graphql and swagger to REST API. Contribute to ssukhpinder/DotNetCoreRestApi development by creating an account on…\*github.com](https://github.com/ssukhpinder/DotNetCoreRestApi)

### Live Demo

 ![](https://cdn.hackernoon.com/images/0Pc2dcjd4hh3TXkrjgio5gRxVFu2-kej3vz9.gif.webp)

\
Thank you for reading, and I hope you liked the article. Please provide your feedback in the comment section.

## Follow me on [C# Publication](https://medium.com/c-sharp-progarmming), [LinkedIn](https://www.linkedin.com/in/sukhpinder-singh-532284a2/), [Instagram](https://www.instagram.com/sukhpindersukh/), [Twitter](https://twitter.com/sukhsukhpinder), [Dev.to](https://dev.to/ssukhpinder), [Pinterest](https://in.pinterest.com/ssukhpinder/_created/), [Substack](https://sukhpinder.substack.com/), [Wix](https://www.csharp-dotnet.com/)

\

:::info
Also published [here](https://medium.com/c-sharp-progarmming/adding-graphql-wrapper-over-net-rest-api-6964053df8d).

:::

\


The writer earns Coil rewards by including the W3C standard web monetization tag on this story. 

Instagram

Twitter

I'm Sukhpinder Singh, a passionate self-taught .Net developer from India.

2021 - HackerNoon Contributor of the Year - DESIGN-PATTERNS

C# Programming LinkTree

2021 - HackerNoon Contributor of the Year - CSHARP

2021 - HackerNoon Contributor of the Year - WEB MONETIZATION

Buy Me a Coffee

LinkTree

Newsletter

Lead Developer

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

How to Add GraphQL Wrapper Over REST API

Too Long; Didn't Read

Companies Mentioned

@ssukhpinder

Credibility

RELATED STORIES