GraphQLAdaptor, WebApiAdaptor, ODataV4Adaptor

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');

GraphQLAdaptor/README.md

@@ -0,0 +1,39 @@
+# Connecting GraphQL Service with Javascript Grid Control
+
+GraphQL is a powerful query language for APIs, designed to provide a more efficient alternative to traditional REST APIs. It allows you to precisely fetch the data you need, reducing over-fetching and under-fetching of data. GraphQL provides a flexible and expressive syntax for querying, enabling clients to request only the specific data they require.
+
+Syncfusion’s Grid component seamlessly integrates with GraphQL servers using the GraphQLAdaptor in the DataManager. This specialized adaptor simplifies the interaction between the Syncfusion Grid and GraphQL servers, allowing efficient data retrieval with support for various operations like CRUD (Create, Read, Update, Delete), paging, sorting, and filtering.
+
+## Add Syncfusion Grid component in your application
+
+Refer the following UG documenation for adding Syncfusion Grid component in your application
+* [Getting Started of Syncfusion Javascript Grid component](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started)
+
+## GraphQL Server setup
+
+You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
+
+* [graphpack npm package](https://www.npmjs.com/package/graphpack) 
+
+## Run the GraphQL Server
+
+To run the server, install the required packages using the following command:
+
+```bash
+npm install
+```
+Then, start the server with:
+```bash
+npm run dev
+```
+## Run the client Grid application
+
+Open `index.html` in a web browser to run the client-side Syncfusion Grid application.
+
+## Resources
+
+You can also refer the below resources to know more details about Syncfusion Javascript Grid components.
+
+* [Demo](https://ej2.syncfusion.com/javascript/demos/#/bootstrap/grid/over-view)
+* [Documentation](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started)
+* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/javascript/documentation/grid/connecting-to-adaptors/graphql-adaptor)

ODataV4Adaptor/ODataV4Adaptor.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34728.123
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ODataV4Adaptor", "ODataV4Adaptor\ODataV4Adaptor.csproj", "{74ADB429-2FE7-4393-977B-D519A96C236C}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{74ADB429-2FE7-4393-977B-D519A96C236C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{74ADB429-2FE7-4393-977B-D519A96C236C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{74ADB429-2FE7-4393-977B-D519A96C236C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{74ADB429-2FE7-4393-977B-D519A96C236C}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {3927FC0F-643B-423D-B5D3-E6D66A7D9934}
+	EndGlobalSection
+EndGlobal