Integrating with GraphQL
Kendo UI for Angular enables you to bind the components to GraphQL by using queries and mutations.
For more information on how to set up the server, the GraphQL schema, and the editing of the Grid, refer to the source code of the sample project. To compose the GraphQL queries and mutations and to consume the received data, the sample project is using apollo-graphql.
To configure the Kendo UI Grid for Angular to use the GraphQL library for editing:
-
Create the
get
query and the mutations for adding, updating, and deleting an item. For more information on how to compose queries and mutations, refer to the official Apollo documentation.tsimport gql from 'graphql-tag'; export const getProductsQuery = gql `{ products { ProductID ProductName UnitPrice UnitsInStock } } `; export const addProductMutation = gql` mutation AddProduct($ProductName: String!, $UnitPrice: Float!, $UnitsInStock: Float!){ AddProduct(ProductName: $ProductName, UnitPrice: $UnitPrice, UnitsInStock: $UnitsInStock){ ProductName ProductID } } `; export const updateProductMutation = gql` mutation UpdateProduct($ProductID: ID!, $ProductName: String! ,$UnitPrice: Float!, $UnitsInStock: Float!){ UpdateProduct(ProductID: $ProductID, ProductName: $ProductName, UnitPrice: $UnitPrice, UnitsInStock: $UnitsInStock){ ProductID } } `; export const deleteProductMutation = gql` mutation DeleteProduct($ProductID: ID!){ DeleteProduct(ProductID: $ProductID){ ProductID } } `;
-
Update the
EditService
to use thewatchQuery
method for sending aGET
request and themutate
method for performing the proper operation.tsimport { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { HttpClient } from '@angular/common/http'; import { Apollo } from 'apollo-angular'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Subscription } from 'rxjs/Subscription'; import { tap } from 'rxjs/operators/tap'; import { map } from 'rxjs/operators/map'; import { Product } from './model'; import { addProductMutation, deleteProductMutation, getProductsQuery, updateProductMutation } from './queries'; @Injectable() export class EditService extends BehaviorSubject<Product[]> { constructor(private apollo: Apollo) { super([]); } private subscription: Subscription; public read() { if (this.subscription) { return; } this.subscription = this.apollo.watchQuery({ query: getProductsQuery }) .valueChanges .pipe( map((changes: any) => <Product[]> changes.data.products), ) .subscribe(data => super.next(data)); } public save(data: Product, isNew?: boolean): void { const mutation = isNew ? addProductMutation : updateProductMutation; this.mutate(mutation, data); } public remove(data: Product): void { this.mutate(deleteProductMutation, data); } private mutate(mutation: any, data: Product): void { this.apollo.mutate({ mutation, variables: data, refetchQueries: [{ query: getProductsQuery }] }) .subscribe(() => {}); } }
-
Bind the Grid to the CRUD operations that are provided by the
EditService
as demonstrated in the article on editing with Reactive Forms.