データの取得 - loadData()

loadData() 関数を利用して、Python や SQL の実行結果を取得することができます。

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

Parameters

name

string

required

Python や SQL の nameを指定します。

type

"json" | "html" | "markdown" | "image"

required

取得するデータの形式を指定します。

variables

Record<string, any>

Python や SQL に渡す Variables オブジェクトです。 任意のオブジェクトの他に、 defineState() で定義した State を渡すこともできます。 State を渡した場合は、 State の値の変更に合わせて再度データを取得します。

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

// name は State オブジェクトです
export const { name } = defineState({ name: "" });

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

<Input state={name} />

Return value

QueryState<T> オブジェクトが返却されます。 QueryStateはStateの拡張であり、Stateと同様に.valueを通じて値にアクセスできます。 .valueでアクセスできる値はtypeパラメータによって異なります。

• type="json": 以下の形式のオブジェクトが返却されます。

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

• type="html": HTML文字列が返却されます。

• type="image": base64エンコードされた画像データが返却されます。

• type="markdown": Markdown文字列が返却されます。

Queryに追加されたQueryStateの独自のプロパティ、メソッドは以下です。

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

refresh()を利用することで、データの再取得をトリガーすることができます。 clearCacheをtrueにすると、データの再取得の完了を待たずにフロントエンドに保持されたクエリ結果を削除します。

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

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

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

Example

index.mdx

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

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

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