a REAL Custom Adapter / DataManager for CUSTOM Data (GraphQL)
11 Replies
Hi Dennes,
Thanks for your update.
You can create your own adaptor by extending the build-in adaptor. Here, we have extended the UrlAdaptor and overridden the default processQuery and ProcessResponse method of urlAdaptor. You can also customize the method based on your requirement.
In the below code example, we have formed the GraphQL query based on the grid actions(query) in processQuery method and return the response as result and count pair object in processResponse method.
|
import { Query, DataManager, UrlAdaptor } from "@syncfusion/ej2-data";
/**
* GraphQL Adaptor with Essentail JS2 Grid
*/
export class CustomGraphQLAdaptor extends UrlAdaptor {
public opt: IGraphQLAdaptorOptions;
public schema: { result: string, count: string };
public query: string;
public getVariables: Function;
public getQuery: Function;
constructor(options: IGraphQLAdaptorOptions) {
super();
this.opt = options;
this.schema = this.opt.response;
this.query = this.opt.query;
// tslint:disable-next-line:no-empty
this.getVariables = () => { };
this.getQuery = () => this.query;
}
processQuery(datamanager: DataManager, query: Query) {
var result = super.processQuery.apply(this, arguments);
var tmp = JSON.parse(result.data);
var vars = this.getVariables() || {};
vars['datamanager'] = tmp;
var data = JSON.stringify({
query: this.getQuery(),
variables: vars
});
result.data = data;
return result; // form query based on your need
}
processResponse(data: any, context: any, query: any) {
return data.data.orders; // should return result and count
}
generateData(inserted: { data: string }, action: string) {
let parsed = JSON.parse(inserted.data);
inserted.data = JSON.stringify({
query: this.opt.getMutation(action),
variables: parsed
});
return inserted;
}
}
let data: Object = new DataManager({
url: 'http://localhost:4000/graphql',
adaptor: new CustomGraphQLAdaptor({
response: {
result: 'orders',
count: 'count'
},
query: `query Order($datamanager: DataManager) { // initial loading
orders(datamanager: $datamanager) {
result { // column names are defined
CustomerID,
ShipName,
Freight
},
count
}
}`
})
});
. . . . .
export interface IGraphQLAdaptorOptions {
response: { result: string, count: string };
query: string;
getQuery?: () => string;
getVariables?: () => Object;
getMutation?: (action: string) => string;
}
|
 |
[Return response as result and count object as follows in processReponse method ]
 |
Help documentation : https://ej2.syncfusion.com/angular/documentation/data/adaptors/?no-cache=1#writing-custom-adaptor
Regards,
Thavasianand S.
SIGN IN To post a reply.
