GraphQL
為 GraphQL schema 產生文件。
設定
請安裝所需的套件。
npm i @fumadocs/graphql graphql產生樣式
請加入下面這一行：
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import '@fumadocs/graphql/css/preset.css';設定外掛
建立 GraphQL 伺服器實例與 <GraphQLPage /> 元件。
import { createGraphQL } from '@fumadocs/graphql/server';
// 注意：這是伺服器端 API
export const graphql = createGraphQL({
// GraphQL schema，可接受：
// SDL 檔案／URL（包含 `extend type`）、SDL 文字、
// 自省（introspection）結果，以及 `GraphQLSchema` 實例。
input: ['./schema.graphql'],
});如需了解可用選項，請參閱 createGraphQL() 與 createGraphQLPage()。
產生頁面
將 staticSource() 傳入您的 loader()，即可在不寫入檔案的情況下產生頁面。
import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';
import { graphql } from '@/lib/graphql';
export const source = loader(
{
docs: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
graphql: await graphql.staticSource({
baseDir: 'graphql',
}),
},
{
baseUrl: '/docs',
// 選用：為頁面樹中的每個頁面項目加上 query/mutation/subscription 徽章
plugins: [graphql.loaderPlugin()],
},
);staticSource() 會為每個 operation 產生一個頁面，並依種類分組到資料夾中 (例如 queries/) 。具名型別的頁面則需另行啟用。
source 的頁面現在分為 docs 與 graphql 兩種類型。請更新所有使用 source 的地方。
請在專屬的 island 中算繪 GraphQL 頁面，並在其中以文件版面配置包裹 <GraphQLPage />：
---
import type { GetStaticPaths, InferGetStaticPropsType } from 'astro';
import Layout from '@/layouts/Layout.astro';
import { Docs } from '@/components/docs';
import { GraphQLDocs } from '@/components/graphql-docs';
import { source } from '@/lib/source';
export const prerender = true;
export const getStaticPaths = (() => {
return source.getPages().map((page) => ({
params: { slug: decodeURI(page.slugs.join('/')) || undefined },
props: { page },
}));
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page } = Astro.props;
const pageTree = await source.serializePageTree(source.getPageTree());
---
{/* [!code ++:13] */}
{page.type === 'graphql' && (
<Layout title={page.data.title ?? 'My App'}>
<GraphQLDocs
client:load
pathname={Astro.url.pathname}
params={Astro.params}
tree={pageTree}
title={page.data.title}
props={page.data.getGraphQLPageProps()}
/>
</Layout>
)}請確認已完成遷移！
繼續之前，請先執行型別檢查：
npm run types:check功能
官方 GraphQL 整合支援：
- 每個 operation (query/mutation/subscription) 各有獨立頁面，並可直接在頁面中展開檢視其使用的型別
- 引數、欄位、棄用標記、預設值，以及
@oneOf輸入物件 - schema 中套用的指示詞 (directive) 及其定義
- 範例請求與回應，可自動產生，或取自您自己的 operation
- cURL、JavaScript、Go、Python、Java、C# 與 Rust 的程式碼範例
- 附變數表單的互動測試區，也能透過 WebSocket 或 SSE 執行訂閱
- 供 LLM 使用的頁面 Markdown
- 可選的具名型別頁面，並列出該型別在整個 schema 中的使用位置
示範
請參閱 GraphQL 範例。
How is this guide?
最後更新於
General Translation
Ferry Health
assistant-ui
Inkeep