How to Add GraphQL Wrapper Over REST API by@ssukhpinder

How to Add GraphQL Wrapper Over REST API

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

The problem of generating helpful documentation and help pages for Web APIs is solved with swagger. Now.Net project is by default enabled with Swagger, as shown on the localhost URL. The problem is to generate helpful documentation for Web.Net Web API pages. Swagger.Net allows you to ask for what you want in a single query, save bandwidth, and reduce requests. The following steps are followed by the NSwag tool and a GraphQL wrapper for GraphQL. The guide is based on the current version of this article.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How to Add GraphQL Wrapper Over REST API
Sukhpinder Singh HackerNoon profile picture

@ssukhpinder

Sukhpinder Singh

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

Learn More
LEARN MORE ABOUT @SSUKHPINDER'S EXPERTISE AND PLACE ON THE INTERNET.

Credibility

react to story with heart

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 Core Web API template for this article demonstration, as shown below.

image

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

image

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

image

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.

image

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

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.

image

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

GitHub Sample

ssukhpinder/DotNetCoreRestApi *Add graphql and swagger to REST API. Contribute to ssukhpinder/DotNetCoreRestApi development by creating an account on…*github.com

Live Demo

image

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

Follow me on C# Publication, LinkedIn, Instagram, Twitter, Dev.to, Pinterest, Substack, Wix

Also published here.

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa