Skip to content

Commit 47e7dff

Browse files
MaithiliyKMaithiliyK
authored
Merge pull request #3 from SyncfusionExamples/odata-adaptor
GraphQLAdaptor, WebApiAdaptor, ODataV4Adaptor
2 parents b7158f8 + bed351b commit 47e7dff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+4546
-2
lines changed

‎GraphQLAdaptor/GraphQLServer/build/index.js

Lines changed: 2132 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎GraphQLAdaptor/GraphQLServer/build/index.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎GraphQLAdaptor/GraphQLServer/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "graphql-server",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "graphpack --port 4200",
8+
"build": "graphpack build"
9+
},
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"graphpack": "^1.0.9"
14+
},
15+
"dependencies": {
16+
"@syncfusion/ej2-data": "21.2.3"
17+
}
18+
}

‎GraphQLAdaptor/GraphQLServer/src/db.js

Lines changed: 612 additions & 0 deletions
Large diffs are not rendered by default.

‎GraphQLAdaptor/GraphQLServer/src/resolvers.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { OrderData } from "./db";
2+
import { DataUtil, Query, DataManager } from "@syncfusion/ej2-data";
3+
4+
DataUtil.serverTimezoneOffset = 0;
5+
6+
const resolvers = {
7+
Query: {
8+
getOrders: (parent, { datamanager }, context, info) => {
9+
console.log(datamanager);
10+
let orders = [...OrderData];
11+
const query = new Query();
12+
13+
const performFiltering = (filterString) => {
14+
const filter = JSON.parse(filterString);
15+
// Iterating over each predicate
16+
filter[0].predicates.forEach(predicate => {
17+
const field = predicate.field;
18+
const operator = predicate.operator;
19+
const value = predicate.value;
20+
query.where(field, operator, value);
21+
});
22+
}
23+
const performSearching = (searchParam) => {
24+
const { fields, key } = JSON.parse(searchParam)[0];
25+
query.search(key, fields);
26+
}
27+
const performSorting = (sorted) => {
28+
for (let i = 0; i < sorted.length; i++) {
29+
const { name, direction } = sorted[i];
30+
query.sortBy(name, direction);
31+
}
32+
}
33+
34+
// Perform filtering
35+
if (datamanager.where) {
36+
performFiltering(datamanager.where);
37+
}
38+
39+
// Perform Searching
40+
if (datamanager.search) {
41+
performSearching(datamanager.search);
42+
}
43+
44+
// Perform sorting
45+
if (datamanager.sorted) {
46+
performSorting(datamanager.sorted);
47+
}
48+
49+
orders = new DataManager(orders).executeLocal(query);
50+
var count = orders.length;
51+
52+
// Perform paging
53+
if (datamanager.skip && datamanager.take) {
54+
const pageSkip = datamanager.skip / datamanager.take + 1;
55+
const pageTake = datamanager.take;
56+
query.page(pageSkip, pageTake);
57+
} else if (datamanager.skip === 0 && datamanager.take) {
58+
query.page(1, datamanager.take);
59+
}
60+
61+
const currentResult = new DataManager(orders).executeLocal(query);
62+
return { result: currentResult, count: count }; // Return result and count separately
63+
},
64+
},
65+
Mutation: {
66+
createOrder: (parent, { value }, context, info) => {
67+
const newOrder = value;
68+
OrderData.push(newOrder);
69+
return newOrder;
70+
},
71+
updateOrder: (parent, { key, keyColumn, value }, context, info) => {
72+
let updatedOrder = OrderData.find(order => order.OrderID === parseInt(key));
73+
updatedOrder.CustomerID = value.CustomerID;
74+
updatedOrder.EmployeeID = value.EmployeeID;
75+
updatedOrder.Freight = value.Freight;
76+
updatedOrder.ShipCity = value.ShipCity;
77+
updatedOrder.ShipCountry = value.ShipCountry;
78+
return updatedOrder; // Make sure to return the updated order.
79+
},
80+
deleteOrder: (parent, { key, keyColumn, value }, context, info) => {
81+
const orderIndex = OrderData.findIndex(order => order.OrderID === parseInt(key));
82+
if (orderIndex === -1) throw new Error("Order not found." + value);
83+
const deletedOrders = OrderData.splice(orderIndex, 1);
84+
return deletedOrders[0];
85+
}
86+
}
87+
88+
};
89+
90+
export default resolvers;

‎GraphQLAdaptor/GraphQLServer/src/schema.graphql

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
#Grid Sort direction
2+
3+
input Sort {
4+
name: String!
5+
direction: String!
6+
}
7+
8+
#Grid aggregates type
9+
10+
input Aggregate {
11+
field: String!
12+
type: String!
13+
}
14+
15+
#Syncfusion DataManager query params
16+
17+
input DataManager {
18+
skip: Int
19+
take: Int
20+
sorted: [Sort]
21+
group: [String]
22+
table: String
23+
select: [String]
24+
where: String
25+
search: String
26+
requiresCounts: Boolean,
27+
aggregates: [Aggregate],
28+
params: String
29+
}
30+
31+
# Grid field names
32+
input OrderInput {
33+
OrderID: Int!
34+
CustomerID: String
35+
EmployeeID: Int
36+
ShipCity: String
37+
ShipCountry: String
38+
}
39+
40+
type Order {
41+
OrderID: Int!
42+
CustomerID: String
43+
EmployeeID: Int
44+
ShipCity: String
45+
ShipCountry: String
46+
}
47+
48+
# need to return type as 'result (i.e, current pager data)' and count (i.e., total number of records in your database)
49+
type ReturnType {
50+
result: [Order]
51+
count: Int
52+
aggregates: String
53+
}
54+
55+
type Query {
56+
getOrders(datamanager: DataManager): ReturnType
57+
}
58+
type Mutation {
59+
60+
createOrder(value: OrderInput): Order!
61+
updateOrder(key: Int!, keyColumn: String, value: OrderInput): Order
62+
deleteOrder(key: Int!, keyColumn: String, value: OrderInput): Order!
63+
}

‎GraphQLAdaptor/GridClient/index.css

Whitespace-only changes.

‎GraphQLAdaptor/GridClient/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Grid</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Typescript Grid Control">
9+
<meta name="author" content="Syncfusion">
10+
<link href="index.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-richtexteditor/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
17+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
18+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet">
19+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
20+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
21+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
22+
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
23+
24+
<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
25+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
26+
</head>
27+
28+
<body>
29+
<div id="container">
30+
<div id="Grid"></div>
31+
</div>
32+
<script src="index.js" type="text/javascript"></script>
33+
</body>
34+
35+
</html>

‎GraphQLAdaptor/GridClient/index.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
var data = new ej.data.DataManager({
2+
url: "http://localhost:4200/", // xxxx represents the port number
3+
adaptor: new ej.data.GraphQLAdaptor({
4+
response: {
5+
result: 'getOrders.result',// Retrieve the actual order data
6+
count: 'getOrders.count' // Retrieve the total count of orders
7+
},
8+
// GraphQL query to fetch orders
9+
query: `query getOrders($datamanager: DataManager) {
10+
getOrders(datamanager: $datamanager) {
11+
count,
12+
result{
13+
OrderID, CustomerID, EmployeeID, ShipCountry}
14+
}
15+
}`,
16+
17+
// mutation for performing CRUD
18+
getMutation: function (action) {
19+
if (action === 'insert') {
20+
return `mutation CreateOrderMutation($value: OrderInput!){
21+
createOrder(value: $value){
22+
OrderID, CustomerID, ShipCity, ShipCountry
23+
}}`;
24+
}
25+
if (action === 'update') {
26+
return `mutation UpdateOrderMutation($key: Int!, $keyColumn: String,$value: OrderInput){
27+
updateOrder(key: $key, keyColumn: $keyColumn, value: $value) {
28+
OrderID, CustomerID, ShipCity, ShipCountry
29+
}
30+
}`;
31+
} else {
32+
return `mutation RemoveOrderMutation($key: Int!, $keyColumn: String, $value: OrderInput){
33+
deleteOrder(key: $key, keyColumn: $keyColumn, value: $value) {
34+
OrderID, CustomerID, ShipCity, ShipCountry
35+
}
36+
}`;
37+
}
38+
}
39+
}),
40+
});
41+
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar, ej.grids.Sort, ej.grids.Page, ej.grids.Filter);
42+
var grid = new ej.grids.Grid({
43+
dataSource: data,
44+
allowPaging: true,
45+
allowSorting: true,
46+
allowFiltering: true,
47+
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Search'],
48+
editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, },
49+
columns: [
50+
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number', isPrimaryKey: true },
51+
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
52+
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
53+
{ field: 'ShipCountry', headerText: 'Ship Country', width: 140 }
54+
]
55+
});
56+
57+
grid.appendTo('#Grid');

‎GraphQLAdaptor/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Connecting GraphQL Service with Javascript Grid Control
2+
3+
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.
4+
5+
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.
6+
7+
## Add Syncfusion Grid component in your application
8+
9+
Refer the following UG documenation for adding Syncfusion Grid component in your application
10+
* [Getting Started of Syncfusion Javascript Grid component](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started)
11+
12+
## GraphQL Server setup
13+
14+
You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
15+
16+
* [graphpack npm package](https://www.npmjs.com/package/graphpack)
17+
18+
## Run the GraphQL Server
19+
20+
To run the server, install the required packages using the following command:
21+
22+
```bash
23+
npm install
24+
```
25+
Then, start the server with:
26+
```bash
27+
npm run dev
28+
```
29+
## Run the client Grid application
30+
31+
Open `index.html` in a web browser to run the client-side Syncfusion Grid application.
32+
33+
## Resources
34+
35+
You can also refer the below resources to know more details about Syncfusion Javascript Grid components.
36+
37+
* [Demo](https://ej2.syncfusion.com/javascript/demos/#/bootstrap/grid/over-view)
38+
* [Documentation](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started)
39+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/javascript/documentation/grid/connecting-to-adaptors/graphql-adaptor)

‎ODataV4Adaptor/ODataV4Adaptor.sln

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.9.34728.123
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ODataV4Adaptor", "ODataV4Adaptor\ODataV4Adaptor.csproj", "{74ADB429-2FE7-4393-977B-D519A96C236C}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{74ADB429-2FE7-4393-977B-D519A96C236C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{74ADB429-2FE7-4393-977B-D519A96C236C}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{74ADB429-2FE7-4393-977B-D519A96C236C}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{74ADB429-2FE7-4393-977B-D519A96C236C}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {3927FC0F-643B-423D-B5D3-E6D66A7D9934}
24+
EndGlobalSection
25+
EndGlobal

0 commit comments

Comments
 (0)