Using GraphQL in existing ASP.NET Web API projects (3)

In the first article in this series, we built a simple GraphQL Web API backend which had action methods that accepted strings which contain GraphQL queries. We used the GraphiQL API Explorer to see how GraphQL works.

In our last article, we went a little further and used attribute filters to create our graphql endpoint with a controller action method that accepted strongly-typed arguments.

In this article, I will be showing you something slightly different.

Remember the cool API explorer I mentioned above?

What if I told you it's possible to add it to our very own ASP.NET Web API project, and developers can query our graphql endpoints with it?

Yes, it's entirely possible, and easy too! 😀

Add GraphiQL API Explorer to your ASP.NET Web API project

If you're cool with reading a git commit description, you can stop reading and check this out.

If you're normal like the rest of us, I'll do my best to guide you on how to setup GraphiQL in your own project, by showing you how I did it in mine.

If you intend to follow along, you can begin with this branch which is where we stopped in our last article.

First, GraphiQL is written in React, so there'll be some webpack and NodeJS involved. Be sure to have a working Node installation. If you don't, you could always get it here.

Using NodeJS would mean that a node_modules folder will be generated in our ASP.NET project folder, and I really don't like the idea, so we'll be making use of an Area instead.

Note: This tutorial helped me get started with using Areas in ASP.NET MVC.

# Create an Area

Add Area to Project Specify name of Area

Create an Area called "GraphiQL"

# Configure the Area routes

A folder in ~/GraphQLWebAPI/Areas/GraphiQL should be created with a class file called GraphiQLAreaRegistration.cs in the previous step.

Replace the RegisterArea method with:

public override void RegisterArea(AreaRegistrationContext context)  
{
    context.MapRoute(
        "GraphiQL_default",
        "GraphiQL/{action}/{id}",
        new { controller = "GraphiQL", action = "Index", id = UrlParameter.Optional }
    );
}

This makes sure that our Area endpoints are within the GraphiQL controller (which we are yet to create).

# Create the GraphiQLController class

Within the ~/GraphWebAPI/Areas/GraphiQL/Controllers folder, create an MVC Controller called GraphiQLController.cs. See the template here

Make sure it has an Index Action method:

// GET: GraphiQL
public ActionResult Index()  
{
    return View();
}

# Create a matching Index.cshtml View

Our Index() Action method above returns a View, so we'll need to create a view called Index.cshtml in the ~/GraphWebAPI/Areas/GraphiQL/Views/GraphiQL folder. See the view template here.

# Add package.json file

In our ~/GraphWebAPI/Areas/GraphiQL folder, create a package.json file with this content which turns that folder into an node project directory that npm install can work in, and specifies the dependencies of the project.

# Configure WebPack

Add a webpack.config.js file to the ~/GraphWebAPI/Areas/GraphiQL folder with this content.

# Add styles and script

These two files should be in the ~/GraphWebAPI/Areas/GraphiQL/Scripts folder, so place them there.

They are needed to configure GraphiQL.

Note how App.js specifies the path of our GraphQL endpoint (~/api/graph) we built in our last two articles (be sure to change yours if different), and the application/graphql Content-Type HTTP header:

function graphQLFetcher(graphQLParams) {  
    return fetch(window.location.origin + '/api/graph', {
        method: 'post',
        headers: { 'Content-Type': 'application/graphql' },
        body: graphQLParams.query
    }).then(response => response.json());
}

# npm install & start

Open a terminal window within the ~/GraphWebAPI/Areas/GraphiQL folder and execute npm install to install dependencies in your node_modules folder.

Then execute npm start to bundle the react project. This command should create two files called bundle.js and styles.css in your ~/GraphWebAPI/Areas/GraphiQL folder.

# Rewrite static file routes

Remember the two files bundle.js and styles.css created in the previous step?

We'd like them to be accessible via the:

~/graphiql/bundle.js
~/graphiql/styles.css

because that's how they are referenced in the Index.cshtml file we created in the ~/GraphWebAPI/Areas/GraphiQL/Views/GraphiQL folder.

However, right now, we need to hit:

~/areas/graphiql/bundle.js
~/areas/graphiql/styles.css

to access them.

So let's do some url rewriting in our root web.config file.

<rewrite>  
  <rules>
<!-- rules go below -->  
   <rule name="Redirect GraphiQL Static Files" stopProcessing="true">
     <match url="^graphiql/(.+)$" />
     <action type="Redirect" url="/areas/graphiql/{R:1}" redirectType="Temporary" />
   </rule>
  </rules>
</rewrite>  

That should go within the <system.webServer> element. It ensures that both files are accessible via the routes we want.

# Build and Run your Web API project

If all goes well, you should have the API explorer up and running at this endpoint: ~/graphiql.

GraphiQL API Explorer

Have fun playing around with the API Explorer, try out different queries and see how GraphQL can best suit your needs.

Hopefully, in our next article, we'll take a look at how to make our GraphQL endpoint retrieve data from a Database directly.

Show Comments