单独文件中的 GraphQL 查询(gql、graphql)
GraphQL queries in Separate File (gql, graphql)
我正在研究 React + Postgraphile (GraphQL) + axios(对 postgraphile 服务器的 http 请求)的教学组合项目。
它有很多 GraphQL 查询。最初从与其他 JavaScript 和渲染代码在同一个文件中的查询开始,但一旦添加了特定查询,它就会变得混乱。
在搜索过程中,我了解到我们可以将查询分离到单独的文件中 - .graphql 或 .gql
为此,我必须与 Webpack 模块集成 -
我想知道是否有更简单(开箱即用)的方法可以在不使用 Webpack 的情况下实现类似的事情,因为它需要大量的配置。
任何指示或示例都会很有帮助。
谢谢。
在客户端,我们通常在 graphql
下创建 pages
目录的镜像树,然后创建 js
或 ts
文件并导出查询!然后在需要的地方导入它(在我们的例子中是 graphql 客户端请求正文)。
例如:
export const GET_TEAM_QUERY = `
query {
// your query here
}
`
希望对您有所帮助!
由于 import/require 非 .js
或 .json
文件的非标准功能,您需要某种插件来告诉 运行time 如何解释它而不是崩溃。我知道的两种方式是:
- 在 webpack 中使用 graphql-tag/loader,只有一个加载器规则:
module.exports = {
// ...
module: {
rules: [
// babel loader, css imports,
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
},
],
},
// ...
}
- 或者,在 babel 中使用 babel-plugin-import-graphql,尽管这个插件只是模仿了上述 webpack 加载器的功能,实际上建议将它与 graphql-tag 一起使用以减少编译查询的大小。如果你需要 运行 你的代码
babel-node
,这很有用,但在大多数情况下我建议使用上面的 webpack 加载器。
我找到了解决这个问题的非常巧妙的方法:graphql-code-generator。使用此工具,您可以在单独的文件中编写查询和片段,并将它们编译成类型脚本文件,完全类型安全并准备好导入到您的组件中。
我正在研究 React + Postgraphile (GraphQL) + axios(对 postgraphile 服务器的 http 请求)的教学组合项目。
它有很多 GraphQL 查询。最初从与其他 JavaScript 和渲染代码在同一个文件中的查询开始,但一旦添加了特定查询,它就会变得混乱。
在搜索过程中,我了解到我们可以将查询分离到单独的文件中 - .graphql 或 .gql 为此,我必须与 Webpack 模块集成 -
我想知道是否有更简单(开箱即用)的方法可以在不使用 Webpack 的情况下实现类似的事情,因为它需要大量的配置。
任何指示或示例都会很有帮助。
谢谢。
在客户端,我们通常在 graphql
下创建 pages
目录的镜像树,然后创建 js
或 ts
文件并导出查询!然后在需要的地方导入它(在我们的例子中是 graphql 客户端请求正文)。
例如:
export const GET_TEAM_QUERY = `
query {
// your query here
}
`
希望对您有所帮助!
由于 import/require 非 .js
或 .json
文件的非标准功能,您需要某种插件来告诉 运行time 如何解释它而不是崩溃。我知道的两种方式是:
- 在 webpack 中使用 graphql-tag/loader,只有一个加载器规则:
module.exports = {
// ...
module: {
rules: [
// babel loader, css imports,
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
},
],
},
// ...
}
- 或者,在 babel 中使用 babel-plugin-import-graphql,尽管这个插件只是模仿了上述 webpack 加载器的功能,实际上建议将它与 graphql-tag 一起使用以减少编译查询的大小。如果你需要 运行 你的代码
babel-node
,这很有用,但在大多数情况下我建议使用上面的 webpack 加载器。
我找到了解决这个问题的非常巧妙的方法:graphql-code-generator。使用此工具,您可以在单独的文件中编写查询和片段,并将它们编译成类型脚本文件,完全类型安全并准备好导入到您的组件中。