SvelteKit项目中官方Rollup GraphQL插件无法正常工作怎么办？

问题根源 #

1. TypeScript编译器无法识别.graphql/.gql模块，缺少对应类型声明
2. Vite插件顺序错误，导致GraphQL插件未正确处理文件
3. 插件配置未确保命名操作被正确导出

1. 调整Vite插件顺序 #

Vite插件按数组顺序执行，SvelteKit插件需要优先初始化项目环境，再让GraphQL插件处理文件。修改vite.config.ts：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import graphql from "@rollup/plugin-graphql"

export default defineConfig({
    plugins: [sveltekit(), graphql()]
});

2. 添加TypeScript类型声明 #

在项目根目录创建graphql.d.ts文件，告诉TS如何解析GraphQL模块：

// graphql.d.ts
declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  // 导出整个文档
  export default DocumentNode;
  // 导出你的命名查询（根据实际操作名调整）
  export const SayHello: DocumentNode;
}

declare module '*.gql' {
  import { DocumentNode } from 'graphql';
  export default DocumentNode;
  export const SayHello: DocumentNode;
}

然后更新tsconfig.json的include字段，确保类型文件被识别：

{
  "include": ["src/**/*", "graphql.d.ts"]
}

3. 配置GraphQL插件导出所有命名操作 #

修改插件配置，开启exportAll确保所有命名查询/突变都被导出：

// vite.config.ts
export default defineConfig({
    plugins: [
        sveltekit(),
        graphql({
            exportAll: true
        })
    ]
});

4. 重启开发服务器 #

修改配置和类型文件后，必须重启Vite开发服务器，让新配置生效。

验证导入是否正常：

<!-- src/routes/+page.svelte -->
<script lang="ts">
    import { SayHello } from '$lib/schema.graphql';
    console.log(SayHello); // 控制台能打印出AST对象即为成功
</script>

内容的提问来源于stack exchange，提问作者minnow