Skip to content

Commit 4f1f84e

Browse files
Ranjani4311Ranjani4311
committed
updated the README.md file
1 parent 77081e4 commit 4f1f84e

1 file changed

Lines changed: 105 additions & 37 deletions

File tree

‎README.md‎

Lines changed: 105 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,105 @@
1-
# Performing-data-and-CRUD-operations-in-ej2-angular-grid-using-GraphQLAdaptor
2-
Discover seamless data integration with Syncfusion's EJ2 Angular Grid using GraphQLAdaptor in this sample repository. Explore efficient techniques for handling filtering, sorting, paging operations, and CRUD operations within your Angular applications, empowering you to manage and display data effectively.
3-
4-
## Add Syncfusion Grid component in your application
5-
6-
Refer the following UG documenation for adding Syncfusion Angular component in your application
7-
* [Getting Started of Syncfusion Angular Grid component](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
8-
9-
## GraphQL Server setup
10-
11-
You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
12-
[`https://www.npmjs.com/package/graphpack`](https://www.npmjs.com/package/graphpack)
13-
14-
## Run the GraphQL Server
15-
To run the server, you need to install the required pacakges using the below command
16-
```bash
17-
npm install
18-
```
19-
and run using
20-
```bash
21-
npm run dev
22-
```
23-
## Run the client Grid application
24-
To run the client, you need to install the required pacakges using the below command
25-
```bash
26-
npm install
27-
```
28-
and run using
29-
```
30-
ng serve
31-
```
32-
## Resources
33-
34-
You can also refer the below resources to know more details about Syncfusion Angular Scheduler components.
35-
* [Demo](https://ej2.syncfusion.com/angular/demos/#/material3/grid/over-view)
36-
* [Documentation](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
37-
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/graphql-adaptor)
1+
# Connecting the Syncfusion React Grid with GraphQL backend in Node.js
2+
3+
GraphQL is a query language that allows applications to request exactly the data needed, nothing more and nothing less. Unlike traditional REST APIs that return fixed data structures, GraphQL enables the client to specify the shape and content of the response.
4+
5+
**Key GraphQL concepts:**
6+
7+
- **Queries**: A query is a request to read data. Queries do not modify data; they only retrieve it.
8+
- **Mutations**: A mutation is a request to modify data. Mutations create, update, or delete records.
9+
- **Resolvers**: Each query or mutation is handled by a resolver, which is a function responsible for fetching data or executing an operation. **Query resolvers** handle **read operations**, while **mutation resolvers** handle **write operations**.
10+
- **Schema**: Defines the structure of the API. The schema describes available data types, the fields within those types, and the operations that can be executed. Query definitions specify the way data can be retrieved, and mutation definitions specify the way data can be modified.
11+
12+
## Prerequisites
13+
14+
| Software / Package | Recommended version | Purpose |
15+
|-----------------------------|------------------------------|-------------------------------------- |
16+
| Node.js | 20.x LTS or later | Backend runtime |
17+
| npm | Latest (11.x+) | Package manager |
18+
| Angular CLI | 18.x or later | Create and manage Angular apps |
19+
20+
21+
## Quick Start
22+
23+
1. **Clone the repository**
24+
```bash
25+
git clone <repository-url>
26+
cd GraphQL_React_Sample
27+
```
28+
29+
30+
2. **Running the application**
31+
**Run the GraphQL server**
32+
- Run the below commands to run the server.
33+
```bash
34+
cd GraphQLServer
35+
npm start
36+
```
37+
The server is now running at http://localhost:4205/.
38+
39+
**Run the client**
40+
- Execute the below commands to run the client application.
41+
```bash
42+
cd GridClient
43+
npm start
44+
```
45+
- Open http://localhost:4200/ in the browser.
46+
47+
## Configuration
48+
49+
The Syncfusion `GraphQLAdaptor` converts grid actions → GraphQL queries/mutations automatically and expects the backend to follow a specific structure.
50+
51+
Below is the complete reference, extracted from your uploaded backend guide.
52+
53+
**DataManager**
54+
55+
The Syncfusion DataManager sends a single JSON payload containing all operation metadata.
56+
57+
| Parameters | Description |
58+
| ---------------- | ------------------------------------------------------------------------------- |
59+
| `requiresCounts` | If it is "true" then the total count of records will be included in response. |
60+
| `skip` | Holds the number of records to skip. |
61+
| `take` | Holds the number of records to take. |
62+
| `sorted` | Contains details about current sorted column and its direction. |
63+
| `where` | Contains details about current filter column name and its constraints. |
64+
| `group` | Contains details about current Grouped column names. |
65+
| `search` | Contains details about current search data. |
66+
| `aggregates` | Contains details about aggregate data. |
67+
68+
---
69+
70+
## Project Layout
71+
72+
| File/Folder | Purpose |
73+
|-------------|---------|
74+
| `GraphQLServer/src/data.js` | Contains mock or seed data used by the GraphQL server |
75+
| `GraphQLServer/src/resolvers.js` | GraphQL resolver functions that map schema fields to data |
76+
| `GraphQLServer/src/schema.graphql` |GraphQL schema defining types, queries, and mutations |
77+
| `GridClient/src/app/app.component.ts` | Root Angular component logic |
78+
| `GridClient/src/app/app.component.html` | Root Angular component template |
79+
| `GridClient/src/app/app.component.css` | Styles for the root component |
80+
| `GridClient/src/styles.css` | Global styles for the Angular application |
81+
82+
---
83+
84+
## Common Tasks
85+
86+
### Add a Record
87+
1. Click **Add** in the grid toolbar
88+
2. Fill out fields (productName, productId, category, rating, etc.)
89+
3. Click **Save** to create the record
90+
91+
### Edit a Record
92+
1. Select a row → **Edit**
93+
2. Modify fields → **Update**
94+
95+
### Delete a Record
96+
1. Select a row → **Delete**
97+
2. Confirm deletion
98+
99+
### Search / Filter / Sort
100+
- Use the **Search** box (toolbar) to match across configured columns
101+
- Use column filter icons for equals/contains/date filters
102+
- Click column headers to sort ascending/descending
103+
104+
## Reference
105+
The [user guide](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/graphql-nodejs-server) provides detailed directions in a clear, step-by-step format.

0 commit comments

Comments
 (0)