Set

To call a setter from your API directly, use the set() method imported from @joystick.js/ui.

Example Usage

import joystick, { set } from '@joystick.js/ui';

const Book = joystick.component({
  events: {
    'click .fa-star': (event = {}, instance = {}) => {
      set('favorite_author', {
        input: {
          author_id: event?.target?.closest('.author-name')?.getAttribute('data-author-id'),
        }
      }).then(() => {
        location.reload();
      });
    },
  },
  render: ({ props }) => {
    return `
      <div>
        <header>
          <h1>${props?.book?.title}</h1>
          <h5 data-author-id="${props?.book?.author?._id}" class="author-name">
            ${props?.book?.author?.name} <i class="fas fa-star"></i>
          </h5>
        </header>
      </div>
    `;
  },
});

export default Book;

In the example above, clicking the star icon triggers the set() method to call the favorite_author setter on the server. The author_id is passed as input, and once the request completes successfully, the page reloads to reflect the updated data.

API

Definition

set(setter_name: string, options: object) => Promise;

Parameters

setter_name string required

The name of the setter to call in your API.

options object

Options for the setter request.

skip boolean

A boolean value that determines whether the setter request should be skipped. Defaults to false.

input object

An object containing input values to send with the setter request.

output array[string]

An array of strings defining which fields to return from the setter response. Supports dot notation (e.g., 'user.profile.name').