createAsyncAPI()

AsyncAPI Server

Fumadocs AsyncAPI のメイン設定です。

ブラウザ環境では参照しないでください。

`input`

読み込む AsyncAPI スキーマです。

ファイルパス
外部 URL
関数(後述)

読み込めるのはここに列挙したスキーマのみです。それ以外の ID を getSchema() に渡したり、ページでプリロードしたりするとエラーがスローされます。

信頼できないスキーマを input に渡さないでください。スキーマ内の $ref によって、ローカルファイルの読み取りや、プライベートホストを含む任意の URL へのフェッチが行われる可能性があります。

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./streetlights.yaml'],
});

`disableCache`

読み込んだスキーマのキャッシュを無効にします。スキーマを頻繁に変更する開発時に便利です。

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  input: ['./asyncapi.yaml'],
  disableCache: true,
});

ドキュメントを一度だけ読み込む

ページは props としてドキュメント全体を受け取るため、ページの読み込み、ナビゲーション、プリフェッチのたびにドキュメントが毎回送信されます。大きなドキュメントの場合は、props に含めないようにしてください。

lib/asyncapi.ts

import { createAsyncAPI } from '@fumadocs/asyncapi/server';

export const asyncapi = createAsyncAPI({
  // ID は URL に含まれるため、URL セーフにしてください
  input: { streetlights: './streetlights.yaml' },
  includeDocument: false, 
});

TanStack Start のルートローダーはサーバーとブラウザの両方で実行されるため、docs ルートでは loadDocument を使わずにドキュメントを読み込めます。サーバー関数は、ブラウザがまだドキュメントを保持していない場合にのみ呼び出してください。

src/routes/docs/$.tsx

import { createServerFn } from '@tanstack/react-start';
import type { AsyncAPI } from '@fumadocs/asyncapi';
import { asyncapi } from '@/lib/asyncapi';

// ブラウザで読み込み済みのドキュメント
const documents = new Map<string, AsyncAPI.AsyncAPIObject>();

const getDocument = createServerFn({ method: 'GET' })
  .validator((id: string) => id)
  .handler(async ({ data: id }) => (await asyncapi.getSchema(id)).bundled);

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const data = await serverLoader({ data: params._splat?.split('/') ?? [] });
    if (data.type === 'asyncapi') {
      const { document: id, payload } = data.props;
      payload.bundled = documents.get(id) ?? (await getDocument({ data: id }));
    }
    return data;
  },
});

function Page() {
  const page = useFumadocsLoader(Route.useLoaderData());
  // 最初のページのドキュメントも保持する
  if (page.type === 'asyncapi' && typeof window !== 'undefined')
    documents.set(page.props.document, page.props.payload.bundled!);
  // ...
}

生成された MDX ファイルを使用する場合は、代わりにドキュメントを preloaded.docs に配置してください。
ブラウザは各ドキュメントをリロードまで保持します。disableCache を使用する場合は、includeDocument を有効にしたままにしてください。

AsyncAPI Serverアンカーリンクをコピー

inputアンカーリンクをコピー

disableCacheアンカーリンクをコピー

ドキュメントを一度だけ読み込むアンカーリンクをコピー

このページの内容

AsyncAPI Server

`input`

`disableCache`

ドキュメントを一度だけ読み込む