Fumadocs 图表QL

从 GraphQL 方案生成 API 参考文件 福马多克与互动游乐场.

npm i @fumadocs/graphql graphql

graphql 是同级依赖.

快速启动

从您的计划创建服务器实例 :

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

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

将生成的页面添加到您的源代码 :

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

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

export const source = loader(
  {
    docs: docs.toFumadocsSource(),
    graphql: await graphql.staticSource({
      // a route group, generated pages won't have a `/graphql` prefix in their URLs
      baseDir: '(graphql)',
      meta: true,
    }),
  },
  {
    baseUrl: '/docs',
    plugins: [graphql.loaderPlugin()],
  },
);

从客户端组件中显示 :

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

export const GraphQLPage = createGraphQLPage({
  playground: {
    url: '/api/graphql',
  },
});

// app/docs/[[...slug]]/page.tsx
if (page.type === 'graphql') {
  return (
    <DocsPage toc={page.data.toc} full>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <GraphQLPage {...page.data.getGraphQLPageProps()} />
      </DocsBody>
    </DocsPage>
  );
}

在您的全球 CSS 中导入样式 :

@import '@fumadocs/graphql/css/preset.css';

选项

投入

input 接受 SDL 文件的文件路径/URL 的数组,或输入的 schema id 记录 :

• SDL文件路径/URL,或SDL文本(包括 extend type (定义).
• 内测结果 (JSON).
• GraphQLSchema 实例.

页面预设

将选项传递到 staticSource() 以控制生成的页面 :

• per: 'item' (默认):每个操作/名称类型、使用一个页面 groupBy (单位:千美元)'kind' | 'none' 或函数)将其组合成文件夹,以及 includeOperations编号 :includeTypes 以过滤项目.
• per: 'file':每计一页.
• per: 'custom':带来自己的页面构建者.

用户

createGraphQLPage() 接受:

• 类型和操作引用的交叉链接会在您通过时预先生成 baseUrl (单位:千美元) baseUrl 您的电话 loader()改为: staticSource(); 以 typeLinks编号 :operationLinks 如果需要,请回电.
• playground: 操作页面上显示的交互式游乐场 - url (GraphQL端点,操作通过HTTP POST发送),, fetcher (将默认取取器替换为代理请求),或 render (替换游乐场UI).
• shikiOptions, (中文(简体) ), components,以及 content编号 :schemaUI 转换槽以进行更深入的自定义.

见 Fumadocs 文档 为了更多.