loadData()

You can use the loadData() function to retrieve the results of Python or SQL executions.

loadData<T>(
  name: string,
  type: "json" | "markdown" | "html" | "image",
  variables?: Record<string, unknown>
): QueryState<T>

​

Parameters

import { defineState } from "@morph-data/components";

// name is a State object
export const { name } = defineState({ name: "" });

export const employeeData = loadData("get_employees", "json", {
  name,
  age: 30,
});

<Input state={name} />

​

Return value

A QueryState<T> object is returned. QueryState is an extension of State, and you can access the value via .value just like State. The value accessible via .value differs depending on the type parameter.

• type="json": An object in the following format is returned.

{
  count: 2,
  items: [
    {
      "name": "Alice",
      "age": 30
    },
    {
      "name": "Bob",
      "age": 40
    }
  ]
}

• type="html": An HTML string is returned.
• type="image": A base64-encoded image data is returned.
• type="markdown": A Markdown string is returned.

The following properties and methods are unique to QueryState that has been added to Query:

{
  loading: boolean,
  refresh(clearCache?: boolean): void,
}

By using refresh(), you can trigger data retrieval again. If you set clearCache to true, the query results retained on the frontend will be deleted without waiting for the data retrieval to complete.

import { loadData } from "@morph-data/components";

export const employeeData = loadData("get_employees", "json");

<Button onClick={() => employeeData.refresh()}>Refresh</Button>;

​

Example

# Employee Data
import { loadData } from "@morph-data/components";

export const employeeData = loadData("get_employees", "json");

## We have { employeeData.value?.items.length } employees.