单独文件中的 GraphQL 查询（gql、graphql）答案

【问题标题】：GraphQL queries in Separate File (gql, graphql)单独文件中的 GraphQL 查询（gql、graphql）
【发布时间】：2020-10-13 02:45:16
【问题描述】：

我正在使用 React + Postgraphile (GraphQL) + axios（对 postgraphile 服务器的 http 请求）的技术组合进行项目。

它有很多 GraphQL 查询。最初是从与其他 JavaScript 和渲染代码在同一个文件中的查询开始，但一旦添加了特定查询，它就变得混乱了。

在搜索时我知道我们可以将查询分离到单独的文件中 - .graphql 或 .gql 为此，我必须与 Webpack 模块集成 -

我想知道是否有更简单（开箱即用）的方法可以在不使用 Webpack 的情况下实现类似的事情，因为它需要大量配置。

任何指针或示例都会很有帮助。

谢谢。

【问题讨论】：

我可以知道为什么投反对票吗？

标签： reactjs graphql gql postgraphile

【解决方案1】：

我找到了一个非常巧妙的解决方案：graphql-code-generator。使用此工具，您可以在单独的文件中编写查询和片段，它会将它们编译为 typescript 文件，完全类型安全并准备好导入到您的组件中。

【讨论】：

【解决方案2】：

由于导入/需要不是.js 或.json 的文件是非标准功能，因此您需要某种插件来告诉运行时如何解释它而不是崩溃。我知道的两种方式是：

在 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 加载器。

【讨论】：

【解决方案3】：

在客户端，我们通常在graphql 下创建pages 目录的镜像树，然后创建js 或ts 文件并导出查询！然后在需要的地方导入它（在我们的例子中是 graphql 客户端请求正文）。

例如：

export const GET_TEAM_QUERY = `
  query {
    // your query here
  }
`

希望有帮助！

【讨论】：

感谢您尝试回答。让我试试。谢谢。
如果我们有想要用来构造查询的参数怎么办？