js-sdk

Installation

Add this to your HTML:

Hasura projects created via beta.hasura.io

<body>
    ...
    <script src="https://github.com/hasura/js-sdk/releases/download/v0.1.4/hasura.min.js"></script>
    <script>
        hasura.setProject('hello70'); // If your hasura project is hello70.hasura-app.io
    </script>
</body>

Hasura projects created via local-development or other methods

<body>
    ...
    <script src="https://github.com/hasura/js-sdk/releases/download/v0.1.2/hasura.min.js"></script>
    <script>
        hasura.setBaseDomain('c103.hasura.me');
        hasura.disableHttps(); // No HTTPS enabled on local-development
    </script>
</body>

Quickstart

/* New session */
hasura.user // Will be anonymous user
// {
//     username: 'anonymous',
//     id: 0,
//     roles: ['anonymous'],
//     token: null
// }

/* SignUp/register a new user */
hasura.setUsername('user1'); // Will set username for current object and save to localStorage
hasura.auth.signup('user1password', onSuccess, onError); // Will log the current user
//Or using a promise
hasura.auth.signup('user1password').then(function(response) {}, function(error) {});

/* 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
//Or using a promise
hasura.auth.loginPromise('user1password').then(function(response) {}, function(error) {});

//After signup/login
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);
//Or using a promise
hasura.auth.logoutPromise().then(function(response) {}, function(error) {});

hasura.user // will be reset to anonymous user

Data query

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

Option 3:

Use promises:

hasura.data.queryPromise({
  type: 'select',
  args: {
    table: 'article',
    columns: ['*']
  }
}).then(function(response){
    //handle response
}, function(error) {
    //handle error
});

Filestore usage

The Hasura JS SDK provides convenience functions to upload and download files.

    <input id="my-file" type="file" />

    var fileInput = document.getElementById('my-file');
    var fileId;

    hasura.file.upload(
      fileInput,
      (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
      });

    //You can also implement the above using promises instead of callbacks
    hasura.file.uploadPromise(fileInput).then(function(response) {}, function(error) {});

    hasura.file.download(fileId); // This will use the HTML5 download attribute to start downloading the file

    hasura.file.delete(fileId,
    (successResponse) => {},
    (errorResponse) => {});
    //Using promises
    hasura.file.deletePromise(fileId).then(function(response) {}, function(error) {});

API requests to custom APIs deployed on Hasura

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

You can also make the above call using promises

    hasura.fetchPromise({
      service: 'api',   // the name of your custom service
      path: '/path',    // the path
      method: 'POST',   // HTTP method (this is POST by default, so you can ignore this key if it's POST)
      json: {...},       // or body: '' if its not a JSON request
      headers: {
        'Content-Type': '...' // you must set the content-type, because the default content-type is set to application/json
      }
    }).then(function(response) {
        // your success handler function
        console.log(response);
    }, function(error) {
        //your error handler function
        console.log(error);
    });

Contribution & Development

For development builds:

npm install
./node_modules/rollup/bin/rollup -c

This will output:

build/js/main.min.js

For production builds:

npm install
NODE_ENV=production ./node_modules/rollup/bin/rollup -c

Unused extra parameter (options) in hasura.auth.signup

@coco98
In js-sdk/src/Auth.js , from Line 15 to 47 exists the signup function , on line 15 which is the function declaration there is a parameter "options" which has no occurrence throughout the function definition , meaning it has no use and being passed just like that , since there is no example also for the signup method , it is quite confusing for first timers , following is a supporting use case.

for the following code,
function mySuccessHandler () {
alert("Signup success")
if(hasura.user.token){
window.location="./selectable.html";
}
}

		function myErrorHandler () {
			  
			  	
			  alert("Signup Failed, Please try again")
			}
			

		hasura.auth.signup(password,
			  mySuccessHandler,
			  myErrorHandler
			);

despite signup being sucessfull, "myErrorHandler" was called ,which was absurd, onerror being called instead of onsuccess callback , later identified as , "mysuccesshandler" was getting mapped to "options" parameter and "myErrorHandler" being mapped to "onsuccess" callback instead of "onerror" callback , this was confirmed as following code worked fine,
function mySuccessHandler () {
alert("Signup success")
if(hasura.user.token){
window.location="./selectable.html";
}
}

		function myErrorHandler () {
			  
			  	
			  alert("Signup Failed, Please try again")
			}
			

		hasura.auth.signup(password,"option",
			  mySuccessHandler,
			  myErrorHandler
			);

when i passed an arbitrary argument , just a random string in place of "options" parameter , everything worked well.