Tech Seeker

In this article, we will implement Angular(v14) CRUD to consume the GraphQL endpoint using the Apollo Angular(v3) library. GraphQL API: GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two essential operations: Query - (Fetching Data) Mutation - (Saving Data) Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo.  Command To Create Angular Application ng new your_app_name Let's install the bootstrap into our application. npm install bootstrap Now configure the CSS and JS links of bootstrap in 'angular.json'. Let's add the bootstrap 'Navbar' component at 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <div class="navbar-brand&qu

In this article, we are going to understand GraphQL Subscriptions in an angular application using the Apollo Angular Library. Graphql Subscription: GraphQL subscriptions are a way to push data from the server to the clients that listen to real-time messages or payload or data from the server. Subscriptions are similar to queries in that they specify a set of fields to be delivered to the client, but instead of immediately returning a single response, a result is sent every time a particular event happens on the server. So for this demo, I have created a GraphQL endpoint in .Net5. So I'm going to use that as my server. Publisher: Subscriber: So above 2 images like 'Publisher' and 'Subscriber' are tested using the browser. Now we will implement those publisher and subscriber functionalities into the angular application. Create An Angular Application: Let's begin our demo by creating an angular sample application. Command To Install Angular CLI:(If not insta

In this article, we will learn about consuming GraphQL API from angular applications using the Apollo Angular library. Overview On GraphQL API: As a front-end developer, no need to understand about in-depth nature of the GraphQL API. But it will be good to know about few key features about it for development. GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two important operations: Query - fetching data Mutation - updating or saving data. Create A Sample Angular Application: Let's create a sample angular application where we are going to implement techniques to consume the GraphQL endpoint. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Apollo Angular Library: Apo