如何引入.graphql文件并优雅的使用fragment
你还在为代码中放入长长的模版字符串所苦恼吗，如下图代码片段：
ps：这个是grqphql client在nodejs后端项目的实践，如果你是在前端使用graphql,并使用了webpack,那么这些问题你都不用担心，因为有现成的轮子供你使用，参见相关loader：https://github.com/apollographql/graphql-tag/blob/master/loader.js，
由于项目开发紧张，我们最开始就是采用这图上这种模式，查询语句和业务代码全放在一起，结果是代码阅读和修改极其麻烦，且查询语句没有字段类型提示，graphql提供的fragment也不能使用（这个特性可以复用很多相同的片段）。
随着业务的不断增加，这个问题越来越凸显，我觉得必须想个办法处理一下，思路是：将graphql查询语句抽出来放在以.grqphql结尾的文件中，然后需要的时候再引入进来。webstorm有个插件正好可以实现语法高亮和类型提示，甚至可以再ide里面进行查询，参考：https://plugins.jetbrains.com/plugin/8097-js-graphql。但是问题来了，怎么再业务代码里面引入这个.graphql文件呢? 直接require肯定是不行的，因为这不是js或c++模块，这个确实也有现成的轮子，见：https://github.com/prisma/graphql-import, 但是这个工具在typescript环境下却有不少问题,见相关issue，怎么办呢？业务又催得紧，然后就用了最简单粗暴的方法: fs.readFileSync('./user.graphql','utf8'), 虽然不够优雅但也解决了燃眉之急。
上面这个办法虽然解决了查询语句和业务代码耦合在一起的问题，但是依然不能使用fragment，随着查询语句越来越多，很多片段都是一样的，后来更新的时候不得不同时修改几处代码，我想实现的效果是将fragment也抽离出来放在以.grqphql结尾的文件中，然后再另一个graphql文件中引入，最终拼在一起返回给业务代码
// a.grapqhl
fragment info on User {
name
mail
}
// b.graphql #import 'a.graphql' query user{ queryUser { ...info } }
// c.js const b = loadGql('./b.graphql')
返回的b应该是个字符串，像下面这这样子：
fragment info on User{
name
mail
}
query user {
queryUser{
....info
}
}
那么loadGql改怎么实现呢？google一番后，发现有个轮子可以参考下: https://github.com/samsarahq/graphql-loader/blob/master/src/loader.ts 但是这轮子需要配合webpack,不能直接在nodejs环境下直接使用，那就把它改造一下吧，上改造后的代码：
import { validate as graphqlValidate } from "graphql/validation/validate"
import { resolve, join, dirname } from "path"
import { Stats, writeFile,readFileSync, readFile } from "fs"
import pify = require("pify")
import {
DocumentNode,
DefinitionNode,
print as graphqlPrint,
parse as graphqlParse,
Source,
visit,
} from "graphql"
export default function loadGql(filePath: string): string | null {
if (!filePath) return null
try {
const source = readFileSync(filePath, 'utf8')
if(!source) return null
const document = loadSource(source, filePath)
const content = graphqlPrint(document)
return content
} catch (err) {
console.log(err)
return null
}
}
function loadSource(
source: string,
filePath: string,
) {
let document: any = graphqlParse(new Source(source, "GraphQL/file"))
document = extractImports(source, document, filePath)
return document
}
async function stat(
loader: any,
filePath: string,
): Promise<Stats> {
const fsStat: (path: string) => Promise<Stats> = pify(
loader.fs.stat.bind(loader.fs),
)
return fsStat(filePath)
}
function extractImports(source: string, document: DocumentNode, filePath: string): DocumentNode {
const lines = source.split(/(\r\n|\r|\n)/)
const imports: Array<string> = []
lines.forEach(line => {
// Find lines that match syntax with `#import "<file>"`
if (line[0] !== "#") {
return
}
const comment = line.slice(1).split(" ")
if (comment[0] !== "import") {
return
}
const filePathMatch = comment[1] && comment[1].match(/^[\"\'](.+)[\"\']/)
if (!filePathMatch || !filePathMatch.length) {
throw new Error("#import statement must specify a quoted file path")
}
const itemPath = resolve(dirname(filePath), filePathMatch[1])
imports.push(itemPath)
})
const files = imports
const contents = files.map(path => [
readFileSync(path, 'utf8'),
path,
])
const nodes = contents.map(([content, fileContext]) => {
return loadSource(content, fileContext)
}
)
const fragmentDefinitions = nodes.reduce((defs, node) => {
defs.push(...node.definitions)
return defs
}, [] as DefinitionNode[])
const newAst = visit(document, {
enter(node, key, parent, path, ancestors) {
if (node.kind === 'Document') {
const documentNode: DocumentNode = {
definitions: [...fragmentDefinitions, ...node.definitions],
kind: 'Document',
}
return documentNode
}
return node
},
})
return newAst
}
ps：代码为typescript，使用需转换成js
至此，这项工作基本告一段落
