GraphQL integration

GraphQL integration

mguinnessmguinness Posts: 73Questions: 10Answers: 1

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.

Replies

  • tangerinetangerine Posts: 3,244Questions: 30Answers: 385

    Your JS Bin reports numerous errors.

  • mguinnessmguinness Posts: 73Questions: 10Answers: 1
    edited December 2021

    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"]]
      });  
    });
    
  • mguinnessmguinness Posts: 73Questions: 10Answers: 1

    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);
      });
    
Sign In or Register to comment.