Created
May 26, 2018 17:41
-
-
Save varunon9/7340d0037ec25978b003c813af82cf24 to your computer and use it in GitHub Desktop.
Querying to graphql server from browser using JQuery Ajax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
simplified version of using graphql request with jquery