GraphQL
GraphQL スキーマからドキュメントを生成します。
セットアップ
必要なパッケージをインストールします。
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スキーマ。次の形式を指定できます:
// SDLファイル/URL(`extend type` を含む)、SDLテキスト、
// イントロスペクション結果、`GraphQLSchema` インスタンス。
input: ['./schema.graphql'],
});各オプションについては、createGraphQL() と createGraphQLPage() を参照してください。
ページを生成する
loader() に staticSource() を渡します。ファイルを書き出さずにページを生成できます。
staticSource() はファイルを読み込むため、source.ts はサーバー専用になります。クライアントのコードから import できるよう、docs を collections.ts に移動してください。
import { loader } from 'fumadocs-core/source';
import { defineDocs } from 'fumadocs-mdx/macro';
import { docs } from '@/lib/collections';
import { graphql } from '@/lib/graphql';
export const docs = defineDocs({
dir: 'content/docs',
docs: {
async: true,
},
});
// `staticSource()` がファイルを読み込むため、サーバー専用になりました
export const source = loader(
{
docs: docs.toFumadocsSource(),
graphql: await graphql.staticSource({
baseDir: 'graphql',
}),
},
{
baseUrl: '/docs',
// 任意: ページツリーの各ページ項目に query/mutation/subscription のバッジを追加します
plugins: [graphql.loaderPlugin()],
},
);staticSource() はオペレーションごとに1ページを生成し、種類別のフォルダー (例: queries/) にまとめます。名前付き型のページはオプトインで生成されます。
source のページは docs と graphql の2種類になりました。 source を使用しているすべての箇所を更新してください。
docs ページで <GraphQLPage /> を使用して GraphQL ページをレンダリングします。
import { docs, source } from '@/lib/source';
import { docs } from '@/lib/collections';
import { source } from '@/lib/source';
import { GraphQLPage } from '@/components/api-page';
export async function loader({ params }: Route.LoaderArgs) {
const slugs = params['*'].split('/').filter((v) => v.length > 0);
const page = source.getPage(slugs);
if (!page) throw new Response('Not found', { status: 404 });
const pageTree = await source.serializePageTree(source.getPageTree());
if (page.type === 'graphql') {
return {
type: 'graphql' as const,
title: page.data.title,
props: page.data.getGraphQLPageProps(),
pageTree,
};
}
return { type: 'docs' as const, path: page.path, pageTree };
}
export default function Page({ loaderData }: Route.ComponentProps) {
const data = useFumadocsLoader(loaderData);
return (
<DocsLayout {...baseOptions()} tree={data.pageTree}>
{data.type === 'graphql' && (
<DocsPage full>
<DocsTitle>{data.title}</DocsTitle>
<DocsBody>
<GraphQLPage {...data.props} />
</DocsBody>
</DocsPage>
)}
{data.type === 'docs' && <Content path={data.path} />}
</DocsLayout>
);
}移行が完了していることを確認してください
次に進む前に、型チェックを実行してください。
npm run types:check機能
公式の GraphQL インテグレーションは、以下の機能をサポートしています。
- オペレーション(query/mutation/subscription)ごとのページ。使用している型をその場で展開して確認できます
- 引数、フィールド、非推奨情報、デフォルト値、
@oneOf入力オブジェクト - スキーマで適用されているディレクティブとその定義
- リクエストとレスポンスの例(自動生成、または独自のオペレーションを使用)
- cURL、JavaScript、Go、Python、Java、C#、Rust のコードサンプル
- 変数フォームを備えたプレイグラウンド。WebSocket や SSE 経由でサブスクリプションも実行できます
- LLM 向けのページの Markdown
- 名前付き型のページ(任意)。スキーマ全体での使用箇所も表示されます
デモ
GraphQL のサンプルをご覧ください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep