GraphQL with ASP.NET Core (Part- VII : Mutation)

Read the previous part - GraphQL with ASP.NET Core (Part- VI : Persist Data - Postgres with EF Core) We've been dealing with data fetching so far. But how do you cause side effects on the server-side data? Side effects can be anything ranging from a data insertion, patching, deletion or update. GraphQL mutation is just the thing you are looking for here. Before we move forward, I would like to do a bit of housekeeping on the project. So, I've changed the name of the HelloWordQuery object graph type…

Keep reading

Creating Reusable Custom Elements in Angular 6+

I first introduced myself to web components when I was working on a Polymer project. You can read about polymer and how to integrate it with ASP.NET Core here in my three-part blog series. However, this post is very straightforward. I'm just going to create a reusable Angular component and use it in a different eco-system; say for example in a normal static HTML web app. To do that we must register the component as a custom element. Walk with me Setting up an Angular project Install the very…

Keep reading

GraphQL with ASP.NET Core (Part- VI : Persist Data - Postgres with EF Core)

Read the previous part - GraphQL with ASP.NET Core (Part- V : Fields, Arguments, Variables) This post focuses more on configuring a persistent data storage rather than discussing different aspects of GraphQL. With that being said, let's connect a Postgres database with our back-end. You may ask, why Postgres? Because everybody does SQL Server; so why not try out a different thing. In our data access layer, we will have a data store class or in another word a repository class. Since it's a good practice to code against abstraction;…

Keep reading

GraphQL with ASP.NET Core (Part- V : Fields, Arguments, Variables)

Read the previous part - GraphQL with ASP.NET Core (Part- IV : GraphiQL - An in-browser IDE) Fields We already have a good idea of GraphQL Fields. Remember we had two fields under the HelloWorldQuery i.e. hello and howdy. Both of them were scaler fields. As the official documentation states, "At its simplest, GraphQL is about asking for specific fields on objects" - graphql.org Let's extend our simple application to accommodate a complex type. Say, for example, we are heading towards a path of making an Inventory system.…

Keep reading

GraphQL with ASP.NET Core (Part- IV : GraphiQL - An in-browser IDE)

Read the previous part - GraphQL with ASP.NET Core Part- III : Dependency Injection GraphiQL (spelled graphical) is an in-browser IDE for exploring GraphQL. I think it's a must-have tool for any server running behind GraphQL. With GraphiQL in place, you can easily give yourself or your team an in-depth insight of your API. There are setups you have to do first. We need some packages installed. Create a package.json file and paste the following snippet, { "name": "GraphQLAPI", "version": "1.0.0", "main": "index.js", "author": "Fiyaz Hasan", "license"…

Keep reading

GraphQL with ASP.NET Core (Part- III : Dependency Injection)

Read the previous part - GraphQL with ASP.NET Core Part- II : Middleware The letter 'D' in SOLID stands for Dependency inversion principle. The principle states, A. High-level modules should not depend on low-level modules. Both should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions. - Wikipedia Newing up instances causes strict coupling between separate code modules. To keep them decoupled from each other, we follow the 'Dependency Inversion Principle'. In this way the modules are not dependent on each other's concrete implementation rather…

Keep reading

My Notebook: Redux & NGRX

State: So, what do you think of the following simple app? If I tell you to represent the current state of the app in form of a simple javascript object, how would you approach? I can only think of two different ways, let initialState = { counter: 0, greeting: 'Hi there!' } Or, let initialState = { state: { counter: 0, greeting: 'Hi there!' } } However, I would prefer the first one since they (counter and greeting) don't relate to each other. If they were instead firstName and lastName, I would have extracted them in…

Keep reading

GraphQL with ASP.NET Core (Part- II : Middleware)

Read the previous part - GraphQL with ASP.NET Core Part- I : Hello World If you are familiar with ASP.NET Core middleware[1], you may have noticed that in our previous post we already had a middleware. In the initial blank app, that middleware was responsible for throwing a Hello World response. Later we replaced it with our custom code so that it can respond back a result of some static GraphQL query. Middleware is software that's assembled into an application pipeline to handle requests and responses. Each component:…

Keep reading

GraphQL with ASP.NET Core (Part- I : Hello World)

Tired of REST? Let's talk about GraphQL. GraphQL provides a declarative[1] way in which you can fetch data from the server. You can read about every bit of goodness that is baked into GraphQL in the official site. However, in this series of blog posts, I'm going to deal with ASP.NET Core and will show how you can integrate GraphQL with it and use it as a query language for your API. Meaning that you only declare the properties you need (In contrast to restful API where you…

Keep reading

Migrating from the old ASP.NET Core Angular Spa template to the newer one

Client Side Changes: If you are using the ASP.NET Core Angular SPA template that has been shipped with the .NET Core 2.0 release of the framework, you will have the following project structure. Assuming that you put your application scripts under the ClientApp/app folder. So, before migrating, take a back up of the folder. Delete the ClientApp folder altogether. We will generate the folder with the Angular CLI. On the project root directory, open up a command prompt window and generate an Angular app by running the…

Keep reading