Target application<\/h2>\r\n
I don\u00b4t want to create a new hello world or bookstore example to show graphql, .net and react in practice. I want to solve real existing user needs we have in our team to have a real use case for the demonstration. With benefits and disadvantages included.<\/p>\r\n
Home office lasting through 2020 and 2021 broke our lifestyle and habits. Maybe IT guys were the only ones who did not notice it. But sometimes even we still need to say a couple of words to each other, share some IT news, discuss new tools, frameworks and cool features. For a long time our team has been using a special chat in MS Teams to stock the information about some good-to-know things, articles and other useful information. But such chat is not the right place for \u201cKnowledge base\u201d.<\/p>\r\n
Quick internet scanning for ready-made solutions showed that ready-made \u201cknowledge base\u201d applications gave variety of tools with one disadvantage in common \u2013 all these applications were not developed by us. Let\u2019s eliminate this disadvantage and create our own Knowledge base with blackjack and Hotchocolate<\/a>. And call it VedaVersum<\/strong>! Veda = knowledge | Versum = Universum.<\/p>\r\n Our application will have:<\/p>\r\n Since we are going to build a distributed application which should support simultaneous work of more than one user, we need a backend service. When we are talking about backend, we mean stability, reliability, performance. There are just a few platforms that can provide such options. DotNet by Microsoft is one of the mature players in the field. And despite its maturity, it is up to date as it has never been before with its lightweight cross platform 6.0 version. Microsoft had done a lot to simplify the \u201centry threshold\u201d into technology. They have made a lot of tutorials, they have simplified the tooling and development environment setup. Microsoft has built the best developers IDEs until now. You can use classic Visual Studio \u00a0and Visual Studio Code or even any IDE you like and Command Line Interface. And just released new .net version 6.0 has official long term support from Microsoft. \u00a0So a lot of developers start to use .Net in their new projects nowadays. But it still remains the good old .Net with its performance, huge code base, vast majority of the third-party libraries. And there is still-the-same-C# with decades of classic programming, OOP implementation, patterns and all the features which \u201cbearded programmers\u201d love. So, I got carried away. For our application we will need a classic web-server. Asp.Net project will fit our needs.<\/p>\r\n GrapQL<\/a> is a Opensource query language for Web API from Facebook. It ensures more flexibility and efficiency for the app developers than traditional REST API. You can build queries and fetch all the data or specific subsets of data you need in one request. GraphQL server will give you exactly the data you requested. This eliminates the over-fetching problem. Subscriptions are among other GraphQL killing features. The App developer are much more flexible by the benefit of a whole query language without the need waiting for API adoptions or changes. \u00a0We will use it in our solution to notify all the users of cards changing, newcomers and also if someone has assigned a card to you. Also with GraphQL we have a lot of other pleasant out-of-the box features. Such as type checking, playground IDE and auto-generated API documentation.<\/p>\r\n Single Page Applications based on JavaScript frameworks have firmly entered our lives leaving old-fashioned UI concepts behind. Again there is a couple of giants in the field which are very popular among the front-end developers. Angular from Google and React from Facebook. These are excellent UI technologies for creating interactive applications for web, mobile and other platforms. Nowadays React popularity is increasing day by day, it has support from Facebook and growing up community. Comparing React and Angular, I found that React is more lightweight, more simple, more declarative because it\u00b4s a UI Library and not a UI Framework like Angular is. And in case of our simple application, React will allow us to create reach powerful UI with less efforts.<\/p>\r\n You can see the basic architecture of the application:<\/p>\r\n Our application will have backend with GraphQL API, which will store entities in Database. And Single Page Application (SPA)<\/a> client, that will communicate with API. In this article we will focus on Backend. Our backend will have two entities – User<\/em> and VedaVersumCard<\/em>. GraphQL will have couple of queries to get users and cards lists. And Mutation to create or update the card. And two subscriptions – UserAction<\/em> (those who came or left), and CardChanged<\/em>. All details you can see below.<\/p>\r\n I\u2019ll describe here all the steps you need to create a project from the scratch by yourself. Ready source code for this solution you can find on GitHub by this link<\/a><\/p>\r\n In this article we will create backend with GraphQL API from scratch. So, let\u2019s do it.<\/p>\r\n First of all, you should have .Net 6.0 SDK<\/a> installed. You can use Visual Studio 22<\/a>, or use VS Code<\/a> (or any other IDE you like) with Dotnet CLI<\/a><\/p>\r\n We will create the \u201cASP.NET Core Empty\u201d<\/em> project with \u201cASP.NET Core 6.0\u201d framework and name it VedaVersum<\/em><\/p>\r\n In Visual Studio we can follow a few simple steps \u2013 start \u201cNew Project\u201d, choose \u201cASP.Net Core Web Application\u201d, then \u201cASP.NET Core Empty\u201d, then choose target network and then give a name to the project.<\/p>\r\n If you are using VS Code, open command line and run these commands:<\/p>\r\n This creates a simple ASP.NET application with 2 classes – Program<\/em> With Main<\/em> method, which constructs and runs the web host. And Startup<\/em> which has 2 methodes. One for setup all needed services in Dependency Injection Container<\/em>, and second is for setup HTTP Request pipeline. This is how initial Configure<\/em> method looks like:<\/p>\r\n <\/p>\r\n ASP.Net is arranged so that each HTTP request goes through pipeline of handlers called Middleware<\/em>. Configure<\/em> method describes what middleware will be involved into pipeline. For the moment, there are only Routing middleware and simple endpoint handler that intercepts request to the root address and returns plain text \u201cHello World\u201d as the HTTP response. We can run just created application (in VS Code by command dotnet run), and take a look to that \u201cHello World\u201d in the browser.<\/p>\r\n So far so good. The scaffold of our API is ready, it\u2019s time to add something meaningful to it. Let\u2019s start from our data model. Now we will create folder Model in our solution, and add entities User<\/em>, VedaVersumCard<\/em>, enum VedaVersumCardAction<\/em> and CardActionMessage<\/em><\/p>\r\n <\/p>\r\n As far as we have created our main entities, it\u2019s time to provide our users the abilities to operate them. Our backend should be able to make standard CRUD operations. Such as create new Knowledge Base cards, read existing cards, edit cards, delete cards and notify users if cards were assigned to them. In terms of GraphQL we should define a Schema and the methods that changes data called Mutations, methods that requesting data called Queries and push notifications from server to client called Subscriptions. To implement the Schema with queries, mutation and subscriptions with any known platforms such as .Net, we should implement methods called resolvers. And there are also should be mappers from native dotnet objects into GraphQL object<\/em> and input<\/em> types.<\/p>\r\n There are several third-party libraries for making GraphQL API with .Net. Here is the list<\/a>.<\/p>\r\n\r\n
Why .Net 6.0?<\/h2>\r\n
Why GraphQL?<\/h2>\r\n
Why React?<\/h2>\r\n
Application design<\/h2>\r\n
![\"Application](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Bild1.png\")
<\/p>\r\nLet\u2019s get started<\/h2>\r\n
md VedaVersum\r\ncd VedaVersum\r\ndotnet new web\r\ncode .<\/pre>\r\n
\r\n\/\/ This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\r\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n{\r\n app.UseRouting();\r\n\r\n app.UseEndpoints(endpoints =>\r\n {\r\n endpoints.MapGet("\/", async context =>\r\n {\r\n await context.Response.WriteAsync("Hello World!");\r\n });\r\n });\r\n}\r\n\r\n<\/pre><\/div>\r\nMaking GraphQL API<\/h2>\r\n