Efficiently Bind Data to the Angular Data Grid and Perform CRUD Operations Using GraphQL
Tags: angular, javascript, webdev
Published: 2022-04-04 07:21:46

---
title: Efficiently Bind Data to the Angular Data Grid and Perform CRUD Operations Using GraphQL
published: true
date: 2022-03-31 10:30:28 UTC
tags: angular, javascript, webdev
canonical_url: https://www.syncfusion.com/blogs/post/efficiently-bind-data-to-the-angular-data-grid-and-perform-crud-operations-using-graphql.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3d5kjtmupvl763vgh0d.png
---

This blog post will guide you in using [GraphQL](https://graphql.org/learn/ "Introduction to GraphQL") to bind data to the [Syncfusion Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid "Syncfusion Angular Data Grid") component and perform sorting, filtering, and CRUD actions.

## GraphQL

According to the [GraphQL](https://graphql.org/learn/ "Introduction to GraphQL") website, “GraphQL is a query language for your API and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.”

##  GraphQL vs. REST API

GraphQL has only one endpoint. So, it is a more efficient client API than REST API.

<table>
<tbody>
<tr>
<td style="width: 626px;" colspan="2" width="619">Comparison of REST API and GraphQL</td>
</tr>
<tr>
<td style="width: 314px;" width="309"><strong>REST API</strong></td>
<td style="width: 312px;" width="308"><strong>GraphQL API</strong></td>
</tr>
<tr>
<td style="width: 314px;" width="309">Multiple endpoints (GET/POST/PUT).</td>
<td style="width: 312px;" width="308">Single endpoint.</td>
</tr>
<tr>
<td style="width: 314px;" width="309">Supports JSON data exchange.</td>
<td style="width: 312px;" width="308">Supports JSON data exchange.</td>
</tr>
<tr>
<td style="width: 314px;" width="309">Can work with all types of databases.</td>
<td style="width: 312px;" width="308">Can work with all types of databases.</td>
</tr>
</tbody>
</table>

### REST API

As I said before, the REST API has multiple endpoints. So, it will send a separate request to the server for each data operation.

Refer to the following image.

![Rest API Architecture](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Rest-API-Architecture.png)

**Example:**

Consider a social media application using REST API. In it, we have to send individual HTTP API requests to fetch details such as user ID, posts, like count, and follower count.

Refer to the following image.

### ![Rest API example](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Rest-API-example.png)GraphQL

GraphQL has only one endpoint. It will send multiple queries in a single request. So, its performance is much better than the REST API.

Refer to the following image.  ![GraphQL API architecture](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/GraphQL-API-architecture.png)

**Example:**

You can easily fetch the user ID, posts, like count, and follower count in a social media application by sending a single HTTP request using GraphQL.

Refer to the following image.

![GraphQL example](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/GraphQL-example.png)

## Fundamentals of GraphQL

To get started with GraphQL you should know:

- Schema and types
- Query
- Mutation
- Resolver

### Schema and types

Since GraphQL APIs are organized based on types, we have to define the exact type of the field name based on our data. The [schema](https://graphql.org/learn/schema/#type-system "Schemas and Types in GraphQL documentation") is a fundamental concept in GraphQL implementation. The following is an example of a basic **schema** declaration in GraphQL.

```js
type Order {
  OrderID: Int!
  CustomerID: String!
  Employees: [Employee]
}
 
type Employee {
  EmployeeID: Int!
  FirstName: String!
  LastName: String // it accept null value.
}
```

### Query

The GraphQL [query](https://graphql.org/learn/queries/ "Queries in GraphQL documentation") is used to read or fetch data from the GraphQL server. The following is an example of a basic **query** declaration in GraphQL.

```js
{
  Employee{
   EmployeeID
   FirstName
  }
}
```

### Mutation

The GraphQL [mutation](https://graphql.org/learn/queries/#mutations "Mutations in GraphQL documentation") is used to perform CRUD actions in the GraphQL server. The following is an example of a basic **mutation** declaration in GraphQL.

```js
Mutation: { // Perform Insert
 createOrder: (parent, { value }, context, info) => {
 return value;
 }}
```

### Resolver

The GraphQL [resolver](https://graphql.org/learn/execution/ "Resolvers in GraphQL documentation") helps us handle the GraphQL query. The following is an example of a basic **resolver** declaration in GraphQL.

```js
const resolvers = {
 Query: {
  getOrders: (parent, { datamanager }, context, info) => {
   if (datamanager.search) {
     // Perform searching
   }
 }
}
```

## Syncfusion DataManager with GraphQLAdaptor

The [GraphQLAdaptor](https://ej2.syncfusion.com/angular/documentation/data/adaptors/#graphql-adaptor "GraphQL Adaptor in Syncfusion DataManager documentation") in our [Syncfusion DataManager](https://ej2.syncfusion.com/angular/documentation/data/getting-started/ "Getting started with Angular DataManager component documentation") component retrieves data from the GraphQL server. It performs CRUD and data operations such as paging, sorting, and filtering by sending the required arguments to the server.

This GraphQLAdaptor enables us to manage data in Syncfusion components.

## Syncfusion Angular Data Grid

Our Syncfusion [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid "Syncfusion Angular Data Grid") is a feature-rich control for displaying data in a tabular format. Its functionalities include data binding, editing, Excel-like filtering, and selection. It also supports exporting data to Excel, CSV, and PDF formats.

Let’s see how to bind data in our Syncfusion Angular Data Grid through the GraphQL server and perform sorting, filtering, and other CRUD operations.

## Required software

- [Node.js (version 12.14 and above)](https://nodejs.org/en/download/ "Download Node.js")

## Configure GraphQL server

First, install the GraphQL server using the [Graphpack](https://www.npmjs.com/package/graphpack "graphpack npm package") npm package.

Then, include the following code in the **package.json** file to configure the GraphQL server.

**package.json**

```js
{
 "name": "graphql-server",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "dev": "graphpack --port 4200",
 "build": "graphpack build"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "graphpack": "^1.0.9"
 },
 "dependencies": {
  "@syncfusion/ej2-data": "^19.2.55"
 }
}
```

### Create a database file

Next, we create the database file using **JSON** data in the GraphQL server. I am naming this database file **db.js**.

Refer to the following code example.

```js
export let filterData = [
 {
   OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date("07 12 1996 02:00:23"),
   ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
   ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
 },
 {
   OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date("07 12 1996 00:03:23"),
   ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
   ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
 },
 {
   OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date("07 12 1996 00:00:23"),
   ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
   ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
 },
 {
   OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
   ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
   ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
 }
]
```

### Create schema definition for GraphQL

Then, create the schema for the GraphQL server with the following code. I am going to name this **schema.graphql**.

```js
#Grid sort direction
 
input Sort {
  name: String!
  direction: String!
}
 
#Grid aggregates type
 
input Aggregate {
  field: String!
  type: String!
}
 
#Syncfusion DataManager query params
 
input DataManager {
  skip: Int
  take: Int
  sorted: [Sort]
  group: [String]
  table: String
  select: [String]
  where: String
  search: String
  requiresCounts: Boolean,
  aggregates: [Aggregate],
  params: String
}
 
# Grid field names
input OrderInput {
  OrderID: Int!
  CustomerID: String
  EmployeeID: Int
  ShipCity: String
  ShipCountry: String
}
 
type Order {
  OrderID: Int!
  CustomerID: String
  EmployeeID: Int
  ShipCity: String
  ShipCountry: String
}
 
# need to return type as 'result (i.e. current pager data)' and count (i.e., the total number of records in your database)
type ReturnType {
  result: [Order]
  count: Int
  aggregates: String
}
 
type Query {
  getOrders(datamanager: DataManager): ReturnType
}
 
type Mutation {
 
  createOrder(value: OrderInput): Order!
  updateOrder(key: Int!, keyColumn: String, value: OrderInput): Order
  deleteOrder(key: Int!, keyColumn: String, value: OrderInput): Order!
}
```

### Create resolver and mutation for GraphQL server

Then, create the resolvers and mutation for the GraphQL server. I’m going to name this **resolver.js**.

Refer to the following code example.

```js
const resolvers = {
 Query: {
  getOrders: (parent, { datamanager }, context, info) => {
   var ret = DataUtil.processData(datamanager, filterData);
   return ret;
  }
 },
 
 Mutation: {
 
  createOrder: (parent, { value }, context, info) => {
   const newOrder = value;
   filterData.push(newOrder);
   return newOrder;
 
  },
  updateOrder: (parent, { key, keyColumn, value }, context, info) => {
   let newOrder = filterData.find(order => order.OrderID === parseInt(key));
   newOrder.CustomerID = value.CustomerID;
   newOrder.EmployeeID = value.EmployeeID;
   newOrder.ShipCity = value.ShipCity;
   newOrder.ShipCountry = value.ShipCountry;
   return newOrder;
  },
  deleteOrder: (parent, { key, keyColumn, value }, context, info) => {
   const orderIndex = filterData.findIndex(order => order.OrderID === parseInt(key));
   if (orderIndex === -1) throw new Error("Order not found." + value);
 
   const deletedOrders = filterData.splice(orderIndex, 1);
 
   return deletedOrders[0];
  }
 }
};
 
export default resolvers;
```

### Run the GraphQL server

Finally, run the GraphQL server using the following command.

```
npm run dev
```

Thus, we have configured the GraphQL server.

## Add Syncfusion Angular Data Grid component

Follow these steps to add the Syncfusion Angular Data Grid component to your app:

1. Refer to the [Getting started with Angular Data Grid documentation](https://ej2.syncfusion.com/angular/documentation/grid/getting-started/ "Getting started with Angular Grid component documentation"). Then, set up the Angular environment and add the Syncfusion Angular Data Grid component to your app.
2. Now, add the following code in the **src/app.component.html, src/app.component.ts** files to perform sorting, filtering, paging, and other CRUD operations.  
[**app.component.html**]
```html
<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [allowFiltering]="true"
 [editSettings]="editSettings" [toolbar]="toolbar">
 <e-columns>
  <e-column field='OrderID' headerText='Order ID' isPrimaryKey="true" textAlign='Right' width=90></e-column>
  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
  <e-column field='EmployeeID' headerText='Freight' textAlign='Right' width=90></e-column>
  <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
  <e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
 </e-columns>
</ejs-grid>
```

**[app.component.ts]**

```js
export class AppComponent {
 public data!: DataManager;
 public pageSettings!: PageSettingsModel;
 public editSettings!: Object;
 public toolbar!: string[];
 ngOnInit(): void {
  // Add the Syncfusion DataManager GrpahQLAdaptor for fetching data from GraphQL server
  this.data = new DataManager({
   url: "http://localhost:4200/", adaptor: new GraphQLAdaptor({
    response: {
     result: 'getOrders.result',
     count: 'getOrders.count'
    },
    query: `query getOrders($datamanager: DataManager) {
     getOrders(datamanager: $datamanager) {
      count,
      result{
       OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry}
      }
     }`,
     // mutation for performing CRUD
     getMutation: function (action: any): string {
      if (action === 'insert') {
       return `mutation CreateOrderMutation($value: OrderInput!){
        createOrder(value: $value){
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }}`;
      }
      if (action === 'update') {
       return `mutation Update($key: Int!, $keyColumn: String,$value: OrderInput){
        updateOrder(key: $key, keyColumn: $keyColumn, value: $value) {
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }
      }`;
     } else {
       return `mutation Remove($key: Int!, $keyColumn: String, $value: OrderInput){
        deleteOrder(key: $key, keyColumn: $keyColumn, value: $value) {
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }
       }`;
      }
     }
   })
 });
 this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true } // enable editing
 this.toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"]; // enable toolbar option
 }
}
```

**Note:** For more details, refer to the [Editing in Angular Data Grid documentation](https://ej2.syncfusion.com/angular/documentation/grid/editing/edit/#editing "Editing in Angular Data Grid component documentation").

### Run the application

Finally, run the application using the following command.

```
npm start
```

Now, you can easily perform sorting, paging, filtering, and CRUD operations in the Angular Data Grid component.

Refer to the following GIF image.

![Performing CRUD Operation in Angular Data Grid using GraphQL](https://www.syncfusion.com/blogs/wp-content/uploads/2022/03/Performing-CRUD-Operation-in-Angular-Data-Grid-using-GraphQL.gif)
<figcaption>Performing CRUD Operation in Angular Data Grid using GraphQL</figcaption>

##  GitHub reference

For more details, refer to the [Binding Data to Angular Data Grid using GraphQL demo on GitHub](https://github.com/jmfarook7/ej2-angular-grid-graphql "Binding Data to Angular Data Grid using GraphQL GitHub demo").

## Conclusion

Thanks for reading! I hope you now have a clear idea of how to use the GraphQL server in our Syncfusion [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid "Syncfusion Angular Data Grid") component to bind data and perform CRUD operations in it. As GraphQL has a single endpoint, it will save you time and considerably enhance your productivity while fetching data. Try out the steps in this blog post and leave your feedback in the comments section below!

The Syncfusion DataGrid component is also available in the [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor Data Grid"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid "ASP.NET Core Data Grid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid "ASP.NET MVC Data Grid"), [WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/datagrid "ASP.NET WebForms Data Grid")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript Data Grid"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid "Angular Data Grid"), [React](https://www.syncfusion.com/react-ui-components/react-data-grid "React Data Grid"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-grid "Vue Data Grid"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Xamarin Data Grid"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Flutter Data Grid"), [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid "UWP Data Grid"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid "WinForms Data Grid"), [WPF](https://www.syncfusion.com/wpf-ui-controls/datagrid "WPF Data Grid"), and [WinUI](https://www.syncfusion.com/winui-controls/datagrid "WinUI Data Grid") platforms. Use it to build great applications!

For existing customers, the new version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Syncfusion Feedback Portal"). We are here to help you succeed!

## Related blogs

- [How to Build a CRUD App in Angular](https://www.syncfusion.com/blogs/post/how-to-build-a-crud-app-in-angular.aspx "How to Build a CRUD App in Angular blog")
- [How to Update Data Without Re-rendering an Entire Grid in Angular](https://www.syncfusion.com/blogs/post/how-to-update-data-without-rerendering-an-entire-grid-in-angular.aspx "How to Update Data Without Rerendering an Entire Grid in Angular blog")
- [A Complete Guide to Running a Full-Stack Angular Application in a Monorepo](https://www.syncfusion.com/blogs/post/a-complete-guide-to-running-a-full-stack-angular-application-in-a-monorepo.aspx "A Complete Guide to Running a Full-Stack Angular Application in a Monorepo blog")
- [Best Practices for JWT Authentication in Angular Apps](https://www.syncfusion.com/blogs/post/best-practices-for-jwt-authentication-in-angular-apps.aspx "Best Practices for JWT Authentication in Angular Apps blog")