Documentation(EJ2-890211): GraphQLAdaptor

GraphQLAdaptor/GraphQLServer/package.json

@@ -0,0 +1,18 @@
+{
+  "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": "21.2.3"
+  }
+}

GraphQLAdaptor/GraphQLServer/src/resolvers.js

@@ -0,0 +1,90 @@
+import { OrderData } from "./db";
+import { DataUtil, Query, DataManager } from "@syncfusion/ej2-data";
+
+DataUtil.serverTimezoneOffset = 0;
+
+const resolvers = {
+  Query: {
+    getOrders: (parent, { datamanager }, context, info) => {
+      console.log(datamanager);
+      let orders = [...OrderData];
+      const query = new Query();
+
+      const performFiltering = (filterString) => {
+        const filter = JSON.parse(filterString);
+        // Iterating over each predicate
+        filter[0].predicates.forEach(predicate => {
+          const field = predicate.field;
+          const operator = predicate.operator;
+          const value = predicate.value;
+          query.where(field, operator, value);
+        });
+      }
+      const performSearching = (searchParam) => {
+        const { fields, key } = JSON.parse(searchParam)[0];
+        query.search(key, fields);
+      }
+      const performSorting = (sorted) => {
+        for (let i = 0; i < sorted.length; i++) {
+          const { name, direction } = sorted[i];
+          query.sortBy(name, direction);
+        }
+      }
+
+      // Perform filtering
+      if (datamanager.where) {
+        performFiltering(datamanager.where);
+      }
+
+      // Perform Searching
+      if (datamanager.search) {
+        performSearching(datamanager.search);
+      }
+
+      // Perform sorting
+      if (datamanager.sorted) {
+        performSorting(datamanager.sorted);
+      }
+
+      orders = new DataManager(orders).executeLocal(query);
+      var count = orders.length;
+
+      // Perform paging
+      if (datamanager.skip && datamanager.take) {
+        const pageSkip = datamanager.skip / datamanager.take + 1;
+        const pageTake = datamanager.take;
+        query.page(pageSkip, pageTake);
+      } else if (datamanager.skip === 0 && datamanager.take) {
+        query.page(1, datamanager.take);
+      }
+
+      const currentResult = new DataManager(orders).executeLocal(query);
+      return { result: currentResult, count: count }; // Return result and count separately
+    },
+  },
+  Mutation: {
+    createOrder: (parent, { value }, context, info) => {
+      const newOrder = value;
+      OrderData.push(newOrder);
+      return newOrder;
+    },
+    updateOrder: (parent, { key, keyColumn, value }, context, info) => {
+      let updatedOrder = OrderData.find(order => order.OrderID === parseInt(key));
+      updatedOrder.CustomerID = value.CustomerID;
+      updatedOrder.EmployeeID = value.EmployeeID;
+      updatedOrder.Freight = value.Freight;
+      updatedOrder.ShipCity = value.ShipCity;
+      updatedOrder.ShipCountry = value.ShipCountry;
+      return updatedOrder; // Make sure to return the updated order.
+    },
+    deleteOrder: (parent, { key, keyColumn, value }, context, info) => {
+      const orderIndex = OrderData.findIndex(order => order.OrderID === parseInt(key));
+      if (orderIndex === -1) throw new Error("Order not found." + value);
+      const deletedOrders = OrderData.splice(orderIndex, 1);
+      return deletedOrders[0];
+    }
+  }
+
+};
+
+export default resolvers;

GraphQLAdaptor/GraphQLServer/src/schema.graphql

@@ -0,0 +1,63 @@
+#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., 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!
+}

GraphQLAdaptor/GridClient/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Grid</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-richtexteditor/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+
+    <script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Grid"></div>
+    </div>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>

GraphQLAdaptor/GridClient/index.js

@@ -0,0 +1,57 @@
+var data = new ej.data.DataManager({
+    url: "http://localhost:4200/",  // xxxx represents the port number
+    adaptor: new ej.data.GraphQLAdaptor({
+        response: {
+            result: 'getOrders.result',// Retrieve the actual order data
+            count: 'getOrders.count'    // Retrieve the total count of orders
+        },
+        // GraphQL query to fetch orders
+        query: `query getOrders($datamanager: DataManager) {
+        getOrders(datamanager: $datamanager) {
+          count,
+          result{
+          OrderID, CustomerID, EmployeeID, ShipCountry}
+          }
+        }`,
+
+        // mutation for performing CRUD
+        getMutation: function (action) {
+            if (action === 'insert') {
+                return `mutation CreateOrderMutation($value: OrderInput!){
+           createOrder(value: $value){
+            OrderID, CustomerID, ShipCity, ShipCountry
+           }}`;
+            }
+            if (action === 'update') {
+                return `mutation UpdateOrderMutation($key: Int!, $keyColumn: String,$value: OrderInput){
+           updateOrder(key: $key, keyColumn: $keyColumn, value: $value) {
+            OrderID, CustomerID, ShipCity, ShipCountry
+           }
+         }`;
+            } else {
+                return `mutation RemoveOrderMutation($key: Int!, $keyColumn: String, $value: OrderInput){
+           deleteOrder(key: $key, keyColumn: $keyColumn, value: $value) {
+            OrderID, CustomerID, ShipCity, ShipCountry
+           }
+          }`;
+            }
+        }
+    }),
+});
+ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar, ej.grids.Sort, ej.grids.Page, ej.grids.Filter);
+var grid = new ej.grids.Grid({
+    dataSource: data,
+    allowPaging: true,
+    allowSorting: true,
+    allowFiltering: true,
+    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Search'],
+    editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, },
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number', isPrimaryKey: true },
+        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
+        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
+        { field: 'ShipCountry', headerText: 'Ship Country', width: 140 }
+    ]
+});
+
+grid.appendTo('#Grid');