createAsyncAPI()
AsyncAPI 伺服器實例。
AsyncAPI 伺服器
Fumadocs AsyncAPI 的主要設定。
請勿在瀏覽器環境中引用此設定。
input
要讀取的 AsyncAPI schema。
- 檔案路徑
- 外部 URL
- 函式 (詳見下文)
只有列於此處的 schema 才能載入，若將其他 ID 傳入 getSchema()，或由頁面預先載入其他 ID，都會拋出錯誤。
請勿將不受信任的 schema 傳給 input，因為其中的 $ref 能讀取本機檔案並擷取任意 URL，連私有主機也不例外。
import { createAsyncAPI } from '@fumadocs/asyncapi/server';
export const asyncapi = createAsyncAPI({
input: ['./streetlights.yaml'],
});disableCache
停用已載入 schema 的快取。適合在開發階段 schema 頻繁變動時使用。
import { createAsyncAPI } from '@fumadocs/asyncapi/server';
export const asyncapi = createAsyncAPI({
input: ['./asyncapi.yaml'],
disableCache: true,
});只載入一次文件
頁面會透過 props 接收完整的文件，因此每次載入頁面、導覽或預先擷取時，都會再傳送一次文件。若文件較大，建議不要透過 props 傳遞：
import { createAsyncAPI } from '@fumadocs/asyncapi/server';
export const asyncapi = createAsyncAPI({
// ID 最終會出現在 URL 中，請確保可安全用於 URL
input: { streetlights: './streetlights.yaml' },
includeDocument: false,
});傳入 loadDocument，即可讓每份文件在每個瀏覽器工作階段中只載入一次。此函式也會在伺服器端算繪期間執行：
'use client';
import { preload } from 'react-dom';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';
export const AsyncAPIPage = createAsyncAPIPage({
async loadDocument(id) {
if (import.meta.env.SSR) {
// 瀏覽器會在載入頁面時一併開始下載
preload(`/api/asyncapi/${id}`, { as: 'fetch', crossOrigin: 'anonymous' });
const { asyncapi } = await import('@/lib/asyncapi');
return (await asyncapi.getSchema(id)).bundled;
}
return (await fetch(`/api/asyncapi/${id}`)).json();
},
});透過路由將文件提供給瀏覽器：
import type { ApiContext } from 'waku/router';
import { asyncapi } from '@/lib/asyncapi';
export async function GET(_: Request, { params }: ApiContext<'/api/asyncapi/[id]'>) {
return Response.json((await asyncapi.getSchema(params.id)).bundled);
}loadDocument同樣適用於產生的 MDX 檔案。- 若使用由 Fumadocs CLI 安裝的 UI，請將
loadDocument傳入createAsyncAPIRenderer()。 - 瀏覽器會保留每份文件，直到頁面重新載入為止。使用
disableCache時，請保持開啟includeDocument。
How is this guide?
最後更新於
General Translation
Ferry Health
assistant-ui
Inkeep