Get

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

Example Usage

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

const Book = joystick.component({
  state: {
    author: null,
  },
  events: {
    'click .author-name': (event = {}, instance = {}) => {
      get('author', {
        input: {
          author_id: event?.target?.getAttribute('data-author-id'),
        }
      }).then((author) => {
        instance.set_state({ author });
      });
    },
  },
  render: ({ props, state, when }) => {
    return `
      <div>
        <header>
          <h1>${props?.book?.title}</h1>
          <h5 data-author-id="${props?.book?.author?._id}" class="author-name">${props?.book?.author?.name}</h5>
          ${when(state?.author, `
            <div class="author">
              <img src="${state?.author?.avatar}" alt="${state?.author?.name}" />
              <h4>${state?.author?.name}</h4>
              <p>${state?.author?.biography}</p>
            </div>
          `)}
        </header>
      </div>
    `;
  },
});

export default Book;

In the example above, we fetch additional information about a book’s author when clicking their name. The get() method sends an API request to the author getter on the server. Once the response is received, we copy the author data to the component’s state, triggering a re-render and displaying additional author details.

API

Definition

get(getter_name: string, options: object) => Promise;

Parameters

getter_name string required

The name of a getter to call in your API.

options object

Options for the getter request.

skip boolean

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

input object

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

output array[string]

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