GraphQL integration

mguinness

I searched the forums for GraphQL but was surprised that there were no references to it. I'm just starting out using GraphQL so I was interested to see if I could get DataTables working against an endpoint. It was a learning exercise but I was able to get it working against the test GraphQLZero service and thought that I would share my efforts with the community.

I created a JS Bin that sends a GraphQL query to the test endpoint. It supports DataTables native pagination, sorting and searching. I wonder if an example like this could be added to the Server-side processing examples page as there may be others that need this. The next logical step would be to have Editor interface to GraphQL using mutation to add/edit/delete records.

tangerine

Your JS Bin reports numerous errors.

mguinness

It works fine in JSFiddle I guess JS Bin doesn't like template strings (backtick character). Full code listing below for future reference.

EDIT: If you add //jshint esnext:true to the beginning of the code in JS Bin the errors will disappear.

$(document).ready(function () {
  var table = $('#example').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
      "url": "https://graphqlzero.almansi.me/api",
      "type": "POST",
      "contentType": "application/json",
      "data": function (d) {
        var gql = `query posts($options: PageQueryOptions) {
          posts(options: $options) {
            data {
              id
              title
              user {
                name
                email
              }
              body
            }
            count: meta {
              totalCount
            }
          }
        }`;
        
        var query = {
          "operationName":null,
          "query":gql,
          "variables": {
            "options": {
              "paginate": {
                "page": (d.start / d.length) + 1,
                "limit": d.length
              },
              "sort": [{
                "field": d.columns[d.order[0].column].data,
                "order": d.order[0].dir.toUpperCase()
              }],
              "search": {
                "q": d.search.value
              }
            }                        
          }
        };
        
        return JSON.stringify(query);
      },
      "dataSrc": function (json) {
        json.recordsTotal = json.data.posts.count.totalCount;
        json.recordsFiltered = json.data.posts.count.totalCount;        
        return json.data.posts.data;
      }      
    },
    "columns": [
      { "data": "id", "title": "Id" },
      { "data": "title", "title": "Title" },
      { "data": "body", "title": "Body", "render": $.fn.dataTable.render.ellipsis( 50, true ) },      
      { "data": "user.name", "title": "Name", "orderable": false },
      { "data": "user.email", "title": "Email", "orderable": false }
    ],
    "order": [[1, "asc"]]
  });  
});

mguinness

Took a crack at using Editor for mutation and the code below is an initial effort just for create. It's worth noting that the returned data is superfluous when using server side processing as DataTables will redraw regardless.

var editor = new $.fn.dataTable.Editor({
  ajax: {
    url: "https://graphqlzero.almansi.me/api",
    type: "POST",
    contentType: "application/json",
    data: function (d) {
      //use d.action to specify createPost, updatePost, deletePost

      var gql = `mutation ($input: CreatePostInput!) {
        result: createPost(input: $input) {
          id
          title
          body
        }
      }`;

      var query = {
        "operationName":null,
        "query":gql,
        "variables": {
          "input": {
            "title": d.data[0].title,
            "body": d.data[0].body
          }
        }
      };
               
      return JSON.stringify(query);
    }
  },
  table: "#example",
  idSrc: "id",
  fields: [
    {
      label: "Title:",
      name: "title"
    }, {
      label: "Body:",
      name: "body",
      type: "textarea"
    }
  ]
});
  
editor
  .on("postSubmit", function (e, json, data, action, xhr) {
    if (json !== null)
      console.log(json.data.result);
  });