GraphQL

設定

請安裝所需的套件。

npm i @fumadocs/graphql graphql

產生樣式

請加入下面這一行：

Tailwind CSS

@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()，即可在不寫入檔案的情況下產生頁面。

lib/source.ts

import { loader } from 'fumadocs-core/source';
import { defineDocs } from 'fumadocs-mdx/macro';
import { graphql } from '@/lib/graphql'; 

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader(
  {
    docs: docs.toFumadocsSource(),
    graphql: await graphql.staticSource({
      baseDir: 'graphql',
    }),
  },
  {
    baseUrl: '/docs',
    // 選用：為頁面樹中的每個頁面項目加上 query/mutation/subscription 徽章
    plugins: [graphql.loaderPlugin()],
  },
);

staticSource() 會為每個 operation 產生一個頁面，並依種類分組到資料夾中 (例如 queries/) 。具名型別的頁面則需另行啟用。

source 的頁面現在分為 docs 與 graphql 兩種類型。請更新所有使用 source 的地方。

請在您的文件頁面中使用 <GraphQLPage /> 算繪 GraphQL 頁面：

app/docs/[[...slug]]/page.tsx

import { GraphQLPage } from '@/components/api-page'; 

export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  if (page.type === 'graphql') {
    return (
      <DocsPage full>
        <DocsTitle>{page.data.title}</DocsTitle>
        <DocsBody>
          <GraphQLPage {...page.data.getGraphQLPageProps()} />
        </DocsBody>
      </DocsPage>
    );
  }

  // ...
}

請確認已完成遷移！

繼續之前，請先執行型別檢查：

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 範例。

設定複製錨點連結

產生樣式複製錨點連結

設定外掛複製錨點連結

產生頁面複製錨點連結

功能複製錨點連結

示範複製錨點連結

本頁目錄

設定

產生樣式

設定外掛

產生頁面

功能

示範