Async Function

minista の JSX で使用できる非同期関数です。

getStaticData

ページ生成前、非同期に処理した結果から props と paths をページテンプレートに渡せます。主に Fetch で CMS の API からデータを取得しページ生成する目的で使います。

// src/pages/index.tsx
import type { StaticData, PageProps } from "minista"

export async function getStaticData(): Promise<StaticData> {
  const apiUrl = "https://api.github.com/repos/qrac/minista/issues"
  const apiParamsQuery = "?state=all&creator=qrac&per_page=5"
  const response = await fetch(apiUrl + apiParamsQuery)
  const data = await response.json()
  return {
    props: {
      issues: data,
    },
  }
}

type PageIssuesProps = PageProps & {
  issues?: { title: string; number: number }[]
}

export default function (props: PageIssuesProps) {
  return (
    <>
      <h1>Issues</h1>
      <ul>
        {props.issues?.map((item, index) => (
          <li key={index}>
            <a href={`/issues/${item.number}`}>{item.title}</a>
          </li>
        ))}
      </ul>
    </>
  )
}

// src/pages/issues/[number].tsx
import type { StaticData, PageProps } from "minista"

export async function getStaticData(): Promise<StaticData> {
  const apiUrl = "https://api.github.com/repos/qrac/minista/issues"
  const apiParamsQuery = "?state=all&creator=qrac&per_page=5"
  const response = await fetch(apiUrl + apiParamsQuery)
  const data = await response.json()
  return data.map((item: PageIssuesTemplateProps) => ({
    props: item,
    paths: { number: item.number },
  }))
}

type PageIssuesTemplateProps = PageProps & {
  title: string
  body: string
  number: number
}

export default function (props: PageIssuesTemplateProps) {
  return (
    <>
      <h1>{props.title}</h1>
      <div>{props.body}</div>
    </>
  )
}

StaticData

TypeScript で getStaticData に型を付与する場合、アロー関数には GetStaticData を、function の戻り値には Promise<StaticData> を使います。

type GetStaticData = {
  (): Promise<StaticData | StaticData[]>
}
type StaticData = {
  paths?: {
    [key: string]: string
  }
  props: {
    [key: string]: any
  }
}