Core Library

Versions: 1.x | 2.x

The StaticKit core 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.

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.

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: '<my-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.