GraphQL

Setup

graphqlPlugin() renders GraphQL pages.

npm i @fumadocs/graphql graphql shiki

Add its styles:

src/styles/global.css

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

Create the GraphQL server from your schema:

src/lib/graphql.ts

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

export const graphql = createGraphQL({
  input: ['./schema.graphql'],
});

Add its pages to your source:

src/lib/source.ts

import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';
import { graphql } from './graphql'; 

export const source = loader({
  source: {
    docs: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
    // `baseUrl` of the loader, to link types and operations
    graphql: await graphql.staticSource({ baseDir: 'graphql', baseUrl: '/docs' }),
  },
  baseUrl: '/docs',
  // adds the kind of items to each page in the sidebar
  plugins: [graphql.loaderPlugin()],
});

It generates a page per operation and named type under /docs/graphql, grouped into folders by their kind. Generated MDX files are not supported, use staticSource() above.

Render them with the plugin:

src/fumadocs.config.ts

import { defineConfig } from '@fumadocs/astro/config';
import { graphqlPlugin } from '@fumadocs/astro/plugins/graphql'; 
import { source } from './lib/source';
import { graphql } from './lib/graphql'; 

export default defineConfig({
  source,
  plugins: [graphqlPlugin({ server: graphql })], 
});

The plugin serves the schemas left out by includeSchema: false, so pages load them once per browser session.

To customize the pages, create <GraphQLPage /> with createGraphQLPage() and add it to your MDX components, loaded lazily (see Lazy Components).

SetupCopy Anchor Link

On this page

Setup