Querying to graphql server from browser using JQuery Ajax

graphql-query-client-side.js

var globals = {}; // application wide global variable

globals.constants = {
}

globals.showToastMessage = function(heading, message, icon) {
    $.toast({
        heading: heading,
        text: message,
        showHideTransition: 'slide',
        icon: icon  // info, error, warning, success
    });
};

globals.makeGraphQLRequest = function(url, params, successCallback) {
    var self = this;
    $.ajax({
        url: url,
        method: 'post',
        data: params,
        dataType: 'json',
        success: function(response) {
            if (response.data) {
                successCallback(response.data);
            } else {
                self.showToastMessage('Error', 'Server side error', 'error');
            }
        },
        error: globals.ajaxErrorHandler
    });
}


$(document).ready(function() {
   
    $('.ui.checkbox').checkbox();
    var params = {}; // parameters

    $('#updateProfileButton').on('click', function() {
        params.name = $('#myProfile input[name="name"]').val();
        params.mobile = $('#myProfile input[name="mobile"]').val();
        params.dob = $('#myProfile input[name="dob"]').val();
        params.gender = $('#myProfile input[name="gender"]:checked').val();

    	$('#updateProfileButton').addClass('loading');

        globals.makeGraphQLRequest('graphql', {
            query: `mutation($params: JSON!) {
                updateProfile(params: $params) {
                    id mobile name email dob gender error
                }
            }`,
            variables: {
                params: params
            }
        }, function successCallback(data) {
            var user = data.updateProfile;
            if (user.error) {
                globals.showToastMessage('Error', user.error, 'error');
            } else {
                globals.showToastMessage('Success', 'Profile Updated', 'success');
            }
            $('#updateProfileButton').removeClass('loading');
        });
    });


    globals.makeGraphQLRequest('graphql', {
        query: `query {
            profile {
                id mobile name email dob gender error
            }
        }`
    }, function successCallback(data) {
        var user = data.profile;
        if (user.error) {
            globals.showToastMessage('Error', user.error, 'error');
        } else {
            // populate my profile
            $('#myProfile input[name="mobile"]').val(user.mobile);
            $('#myProfile input[name="name"]').val(user.name);
            $('#myProfile input[name="email"]').val(user.email);
            $('#myProfile input[name="dob"]').val(globals.formatDate(user.dob));

            $('#myProfile input[name="gender"]').removeAttr('checked');
            $('#myProfile input[name="gender"][value="' + user.gender + '"]')
                    .attr('checked', 'checked').click();
            }
    });

});

simplified version of using graphql request with jquery

$.gql = async function(query) {
    return new Promise((resolve, reject) => {
      $.ajax({
          url: "https://url/graphql",
          method: 'POST',
          data: JSON.stringify({query}),
          dataType: 'json',
          success: resolve,
          error: reject
      });
    });
}