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 implement Angular(v14) CRUD operations using NgRX Data(v14) state management. NgRx Data: In general angular application uses NgRx store, effects, entity, etc libraries to maintain state. The trade-off with the '@ngrx/store' is we have to write a huge number of actions, reducers, effects, selectors, HTTP API calls per entity model, etc resulting in more numbers of files needing to be maintained. Using NgRx Data we can reduce our code to very little despite having a large number of entity models in our application. The NgRx Data is an abstraction over the Store, Effects, and Entity that reduces the amount of code we have to write. By gaining the abstraction benefit, we are going to lose our direct interaction with NgRx libraries. When to use NgRx Data?: NgRx Data is a good choice when our application involves a lot of 'Create', 'Read', 'Update', 'Delete' operations. Our Entity Model should contain a primary key valu

In this article, we are going to implement the Angular(14) state management CRUD example with NgRx(14) NgRx Store For State Management: In an angular application to share consistent data between multiple components, we use NgRx state management. Using NgRx state helps to avoid unwanted API calls, easy to maintain consistent data, etc. The main building blocks for the NgRx store are: Actions - NgRx actions represents event to trigger the reducers to save the data into the stores. Reducer - Reducer's pure function, which is used to create a new state on data change. Store - The store is the model or entity that holds the data. Selector - Selector to fetch the slices of data from the store to angular components. Effects - Effects deals with external network calls like API. The effect gets executed based the action performed Ngrx State Management flow: The angular component needs data for binding.  So angular component calls an action that is responsible for invoking the API call.  Aft