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:

1. 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.

   ts

   import 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
         }
     }
   `;

2. Update the EditService to use the watchQuery method for sending a GET request and the mutate method for performing the proper operation.

   ts

   import { 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(() => {});
     }
   }

3. Bind the Grid to the CRUD operations that are provided by the EditService as demonstrated in the article on editing with Reactive Forms.

Suggested Links

• GraphQL
• Sample Project on GraphQL Integration
• Official Apollo Documentation