Client Library

Versions: 1.x | 2.x

The StaticKit client library provides an API client for communicating with the StaticKit backend.

npm install @statickit/core

Source on GitHub | npm package

Creating a client

Use the createClient factory to build a new client instance:

import { createClient } from '@statickit/core';
// Create a new client instance. You can safely run this in code
// that will get executed during server-side rendering.
const client = createClient({ site: '{your-site-id}' });
// Start the browser session as soon as the DOM is available.
// This function only works in the browser environment, so it must be
// run inside a `useEffect` hook in React, for example.
client.startBrowserSession();

API

invokeFunction(name, args, opts = {})

Invokes a StaticKit function.

KeyTypeDefaultDescription
name *stringThe function name (from your statickit.json config)
args *objectAn object of function arguments
optsobject{}Miscellanous options

Return Value

This function returns a Promise that resolves to an object with a status field and varied response fields (depending on the particular function type).

submitForm(key, data, opts = {})

Submits a StaticKit form.

KeyTypeDefaultDescription
key *stringThe form key (from your statickit.json config)
data *object | FormData{}The form data to send to the server
optsobject{}Miscellanous options

Return Value

This function returns a Promise that resolves to an object containing a body field and a response field:

let { body, response } = await client.submitForm('contactForm', formData);
switch (response.status) {
  case 200:
    // Submission succeeded
  case 422:
    // Validation errors occurred
    // Use `body.errors` to display errors
  default:
    // Something unexpected happened
}

When the submission succeeds, the body will include a submission id and data:

{
  id: "3ac1fb5d-259a-4af5-aac5-2ce53215b6c5",
  data: {
    email: "[email protected]"
  }
}

If there are validation errors, the body will include an array of errors:

{
  errors: [{
    code: "REQUIRED",
    field: "email",
    message: "is required",
    properties: {}
  }]
}

Here's an example of submitting the data from a <form> node to StaticKit and awaiting the response:

import { createClient } from '@statickit/core';
const client = createClient({ site: '{your-site-id}' });
client.startBrowserSession();
async function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  const { body, response } = await client.submitForm('contactForm', formData);
  // ...
}

teardown()

This method cleans up resources used by the client.