GraphQL

SetupCopy Anchor Link

Install the required packages.

npm i @fumadocs/graphql graphql

Generate StylesCopy Anchor Link

Add the following line:

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import '@fumadocs/graphql/css/preset.css';

Configure PluginCopy Anchor Link

Create the GraphQL server instance & <GraphQLPage /> component.

import { createGraphQL } from '@fumadocs/graphql/server';

// note: this is a server-side API
export const graphql = createGraphQL({
  // the GraphQL schema, it accepts:
  // SDL files/URLs (including `extend type`), SDL text,
  // introspection results, and `GraphQLSchema` instances.
  input: ['./schema.graphql'],
});

See createGraphQL() & createGraphQLPage() for available options.

Generate PagesCopy Anchor Link

Integrate into Loader API to generate pages, without generating real files.

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',
    // optional: adds a query/mutation/subscription badge to each page item in page tree
    plugins: [graphql.loaderPlugin()],
  },
);

It generates a page per operation, grouped into folders by kind (e.g. queries/). Pages of named types are opt-in.

It will change the type of your pages, make sure to update all references to your source, and update your page renderer:

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

FeaturesCopy Anchor Link

The official GraphQL integration supports:

• A page per operation (query/mutation/subscription), with the types it uses explored in place
• Arguments, fields, deprecations, default values and @oneOf input objects
• Directives applied in the schema, with their definitions
• Example requests and responses, generated or from your own operations
• Code samples in cURL, JavaScript, Go, Python, Java, C# and Rust
• A playground with a variables form, it runs subscriptions over WebSocket or SSE too
• Markdown of pages for LLMs
• Optional pages for named types, with their usages across the schema

DemoCopy Anchor Link

See the GraphQL example.