# Fumadocs (Framework Mode, Next.js): GraphQL
URL: /ja/docs/next/integrations/graphql
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/graphql/index.ja.mdx

GraphQL スキーマからドキュメントを生成します。

## セットアップ [#setup]

必要なパッケージをインストールします。

```npm
npm i @fumadocs/graphql graphql
```

### スタイルの生成 [#generate-styles]

次の行を追加します。

```css title="Tailwind CSS"
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
/* [!code ++] */
@import '@fumadocs/graphql/css/preset.css';
```

### プラグインの設定 [#configure-plugin]

GraphQL サーバーインスタンスと `<GraphQLPage />` コンポーネントを作成します。

```ts tab="lib/graphql.ts"
import { createGraphQL } from '@fumadocs/graphql/server';

// 注: これはサーバーサイドAPIです
export const graphql = createGraphQL({
  // GraphQLスキーマ。次の形式を指定できます:
  // SDLファイル/URL(`extend type` を含む)、SDLテキスト、
  // イントロスペクション結果、`GraphQLSchema` インスタンス。
  input: ['./schema.graphql'],
});
```

```tsx tab="components/api-page.tsx"
'use client';
import { createGraphQLPage } from '@fumadocs/graphql/ui';

export const GraphQLPage = createGraphQLPage({
  playground: {
    // オペレーションページでインタラクティブなプレイグラウンドを有効にします(省略可)
    url: 'https://api.example.com/graphql',
  },
});
```

各オプションについては、[`createGraphQL()`](/docs/next/integrations/graphql/server) と [`createGraphQLPage()`](/docs/next/integrations/graphql/api-page) を参照してください。

### ページを生成する [#generate-pages]

[`loader()`](/docs/headless/source-api/source) に `staticSource()` を渡します。ファイルを書き出さずにページを生成できます。

```ts title="lib/source.ts"
import { loader } from 'fumadocs-core/source';
import { defineDocs } from 'fumadocs-mdx/macro';
import { graphql } from '@/lib/graphql'; // [!code ++]

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

export const source = loader(
  // [!code ++:6]
  {
    docs: docs.toFumadocsSource(),
    graphql: await graphql.staticSource({
      baseDir: 'graphql',
    }),
  },
  {
    baseUrl: '/docs',
    // [!code ++:2] 任意: ページツリーの各ページ項目に query/mutation/subscription のバッジを追加します
    plugins: [graphql.loaderPlugin()],
  },
);
```

`staticSource()` はオペレーションごとに1ページを生成し、種類別のフォルダー (例: `queries/`) にまとめます。名前付き型のページは[オプトイン](/docs/next/integrations/graphql/server#includeoperations--includetypes)で生成されます。

**`source` のページは `docs` と `graphql` の2種類になりました。** `source` を使用しているすべての箇所を更新してください。

docs ページで `<GraphQLPage />` を使用して GraphQL ページをレンダリングします。

```tsx title="app/docs/[[...slug]]/page.tsx"
import { GraphQLPage } from '@/components/api-page'; // [!code ++]

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

  // [!code ++:10]
  if (page.type === 'graphql') {
    return (
      <DocsPage full>
        <DocsTitle>{page.data.title}</DocsTitle>
        <DocsBody>
          <GraphQLPage {...page.data.getGraphQLPageProps()} />
        </DocsBody>
      </DocsPage>
    );
  }

  // ...
}
```

<Callout type="warn" title="移行が完了していることを確認してください">
次に進む前に、型チェックを実行してください。

```npm
npm run types:check
```
</Callout>

## 機能 [#features]

公式の GraphQL インテグレーションは、以下の機能をサポートしています。

* オペレーション(query/mutation/subscription)ごとのページ。使用している型をその場で展開して確認できます
* 引数、フィールド、非推奨情報、デフォルト値、`@oneOf` 入力オブジェクト
* スキーマで適用されているディレクティブとその定義
* リクエストとレスポンスの例(自動生成、または[独自のオペレーション](/docs/next/integrations/graphql/server#examples)を使用)
* cURL、JavaScript、Go、Python、Java、C#、Rust のコードサンプル
* 変数フォームを備えたプレイグラウンド。WebSocket や SSE 経由で[サブスクリプション](/docs/next/integrations/graphql/api-page#subscriptions)も実行できます
* LLM 向けの[ページの Markdown](/docs/next/integrations/graphql/server#markdown-for-llms)
* 名前付き型のページ(任意)。スキーマ全体での使用箇所も表示されます

### デモ [#demo]

[GraphQL のサンプル](/docs/graphql)をご覧ください。