Replies

• tangerine Posts: 3,348Questions: 36Answers: 394

  December 2021

  Your JS Bin reports numerous errors.
• mguinness Posts: 85Questions: 12Answers: 1

  December 2021 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"]]
    });  
  });
  
• mguinness Posts: 85Questions: 12Answers: 1

  December 2021

  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);
    });