1. Home
  2. Forum
  3. React - EJ 2
  4. Datamanager GraphQL Adaptor sample for React

Datamanager GraphQL Adaptor sample for React

Hi, I need samples for React project using DataManager GraphQL Adaptor for forms and grid components. I was checking its documentation and I couldn't find samples for GraphQL.


Thank you in advance


Regards,

Cesar



1 Reply
RS Rajapandiyan Settu Syncfusion Team November 12, 2021 01:45 PM UTC

Hi Cesar, 
 
Greetings from Syncfusion support. 
 
Based on your requirement, we have prepared the sample using GraphQL Adaptor. 
 
The `GraphQLAdaptor` provides an option to retrieve data from the GraphQL server. It performs CRUD and data operations such as paging, sorting, filtering etc by sending the required arguments to the server. 
 
You can provide the GraphQL query string by using the `query` property of the `GraphQLAdaptor`. Since, the `GraphQLAdaptor` is extended from the `UrlAdaptor`, it expects response as a JSON object with properties `result` and `count` which contains the collection of entities and the total number of records respectively. The GraphQL response should be returned in JSON format like { 
"data": { ... }} with query name as field, you need to set the `result` and `count` properties to map the response. 
 
[App.tsx] 
 
 
export default class App extends React.Component<{}, {}>{ 
  public data = new DataManager({ 
    adaptor: new GraphQLAdaptor({ 
      query: `query getOrders($datamanager: DataManager) { 
          getOrders(datamanager: $datamanager) { 
              count, 
              result{OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry} 
           } 
  }`, 
      response: { 
        count: 'getOrders.count', 
        result: 'getOrders.result' 
      }, 
  }), 
    url: 'http://localhost:4200/' 
}); 
  public gridInstance: any; 
 
  public render() { 
    return  <div> 
        {<div> 
        <GridComponent dataSource={this.data} allowPaging={true} height='300' ref={(g) => { this.gridInstance = g; }} allowSorting={true}> 
            <ColumnsDirective> 
            ---- 
            <Inject services={[Page, Sort]}/> 
        </GridComponent> 
          </div>} 
      </div>} 
}; 
 
 
 
The Schema for the GraphQL server is 
 
 
[schema.graphql] 
 
 
input OrderInput { 
  OrderID: Int! 
  CustomerID: String 
  EmployeeID: Int 
  ShipCity: String 
  ShipCountry: String 
} 
 
type Order { 
  OrderID: Int! 
  CustomerID: String 
  EmployeeID: Int 
  ShipCity: String 
  ShipCountry: String 
} 
 
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! 
} 
 
 
 
The resolver for the corresponding action is 
 
 
[resolvers.js] 
 
 
const resolvers = { 
  Query: { 
    getOrders: (parent, { datamanager }, context, info) => {      
     var ret = DataUtil.processData(datamanager, filterData); 
     return ret; 
    } 
  }, 
   
  Mutation: { 
    createOrder: (parent, { value }, context, info) => { 
      // perform insert 
      return newOrder; 
 
    }, 
    updateOrder: (parent, { key, keyColumn, value }, context, info) => { 
      // perform update 
      return newOrder; 
    }, 
    deleteOrder: (parent, { key, keyColumn, value }, context, info) => { 
      // perform delete 
      return deletedOrders[0]; 
    }, 
}; 
 
export default resolvers; 
 
 

The query parameters will be send in a string format which contains the below details. 

`RequiresCounts` - If it is `true` then the total count of records will be included in response. 
`Skip` - Holds the number of records to skip. 
`Take` - Holds the number of records to take. 
`Sorted` - Contains details about current sorted column and its direction. 
`Where` - Contains details about current filter column name and its constraints. 
`Group` - Contains details about current Grouped column names. 

Find the below sample for your reference. 


Follow the below steps to run the sample. 

  1. Extract the project.
  2. Go to the server folder and do npm install. Then run this folder by npm run dev command.
  3. Now it will generate the link like 'http://localhost:4200/'. Copy this link.
  4. Go to the Grid folder paste the generated link as URL path of GraphQL Adaptor.
  5. Do npm install and run the project by npm start.

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon