Add this to your HTML:
<body>
...
<script src="https://github.com/hasura/js-sdk/releases/download/v0.1.1/hasura.min.js"></script>
<script>
hasura.setProjectName('hello70'); // If your hasura project is hello70.hasura-app.io
</script>
</body><body>
...
<script src="https://github.com/hasura/js-sdk/releases/download/v0.1.1/hasura.min.js"></script>
<script>
hasura.setBaseDomain('c103.hasura.me');
hasura.disableHttps(); // No HTTPS enabled on local-development
</script>
</body>/* New session */
hasura.user // Will be anonymous user
// {
// username: 'anonymous',
// id: 0,
// roles: ['anonymous'],
// token: null
// }
/* Login and create new session */
hasura.setUsername('user1'); // Will set username for current object and save to localStorage
hasura.auth.login('user1password', onSuccess, onError); // Will log the current user
hasura.user // will be logged in user
// {
// username: 'user1',
// id: 3,
// roles: ['user'],
// token: 'xxxxxxxxxxxxxxxx'
// }
/* If you refresh the page */
hasura.user // will be the logged in user
// {
// username: 'user1',
// id: 3,
// roles: ['user'],
// token: 'xxxxxxxxxxxxxxxx'
// }
hasura.auth.logout(onSuccess, onError);
hasura.user // will be reset to anonymous userOption 1:
Use lambdas or anonymous functions directly for handling success/error.
hasura.data.query({
type: 'select',
args: {
table: 'article',
columns: ['*']
}},
(data) => { console.log(data); },
(error) => { console.log(error); }
);Option 2:
Use predefined functions as shown below:
function mySuccessHandler (data) {
console.log(data);
}
function myErrorHandler (e) {
console.log(e);
}
hasura.data.query({
type: 'select',
args: {
table: 'article',
columns: ['*']
}},
mySuccessHandler,
myErrorHandler
);NOTE: In the examples below, onSuccess and onError are callback functions that you must implement.
// This will use the hasura.user session object to send
// if hasura.user.token === null, then request is made as an anonymous user (no auth token)
hasura.data.queryTemplate(
'query-template-name',
{
param: <value>,
param2: <value2>
},
onSuccess,
onError);
// Query with a specific role
hasura.data.queryTemplateAsRole(
'user',
'query-template-name',
{
param: <value>,
param2: <value2>
},
onSuccess,
onError);The Hasura JS SDK provides convenience functions to upload and download files.
<input id="my-file" type="file" /> var input = document.getElementById('my-file');
var file = input.files[0];
var fileId;
hasura.file.upload(
file,
(successResponse) => {
fileId = successResponse.file_id;
console.log('Uploaded file: ' + fileId);
// your code goes here
},
(errorResponse) => {
console.log('Error uploading file');
console.log(errorResponse);
// your code goes here
});
hasura.file.download(fileId); // This will use the HTML5 download attribute to start downloading the file
hasura.file.delete(fileId);The Hasura JS SDK provides a simple wrapper over fetch to make it easy
for you to make API requests to APIs deployed as custom microservices on Hasura.
If you're making a JSON request:
hasura.fetch.upload(
{
service: 'api', // the name of your custom service
path: '/submit', // the path
method: 'POST', // HTTP method (this is POST by default, so you can ignore this key if it's POST)
json: {...}, // set this to an object or an array that will be serialised to make the request body
headers: {
'X-Custom-Header': '...'
}
},
(jsonResponse) => {
// your success handler function
console.log(jsonResponse);
// By the way, jsonResponse is an object or an array
// if the response content-type is application/json
console.assert(typeof(jsonResponse) === 'object');
},
(error) => {
// your error handler function
console.error(error);
});If you're making a request with a non JSON content-type:
hasura.fetch.upload(
{
service: 'api', // the name of your custom service
path: '/submit', // the path
method: 'POST', // HTTP method (this is POST by default, so you can ignore this key if it's POST)
body: '...', // set this to a string or a serialised value
headers: {
'Content-Type': '...' // you must set the content-type, because the default content-type is set to application/json
}
},
(response) => {
// your success handler function
console.log(response);
},
(error) => {
// your error handler function
console.error(error);
});For development builds:
npm install
./node_modules/rollup/bin/rollup -cThis will output:
build/js/main.min.jsFor production builds:
npm install
NODE_ENV=production ./node_modules/rollup/bin/rollup -c