如何将 GraphQL 查询作为字符串而不是对象导入答案

【问题标题】：How to import GraphQL query as a string instead of an object如何将 GraphQL 查询作为字符串而不是对象导入
【发布时间】：2020-05-05 16:24:37
【问题描述】：

我为我的查询创建了一个.gql 文件，我正在像这样导入它：

const query = require("@/hello.gql");

但是，如果我将 query 变量记录到控制台，它会显示一个对象，而不是字符串。我该怎么做才能让我导入的查询只是一个字符串？

【问题讨论】：

标签： vue.js graphql graphql-js graphql-tag

【解决方案1】：

因为，您只是导入查询，而不是使用它。

您可以像这样使用 apollo 来使用该查询

const yourQuery= require("@/hello.gql");

data(){
 return {
    queryResponse: []  
  }
}

apollo: {
    queryResponse: {
      prefetch: true,
      query: yourQuery
    }
  }

这样，您将获取查询并将响应保存在 queryResponse 中

【讨论】：

【解决方案2】：

使用apollo-client 查询服务器时，提供的query 参数必须是DocumentNode 类型的对象，这是查询的AST 表示。换句话说，如果你使用apollo-client，你不能只是将查询作为字符串传递给它，你必须先解析它。这通常使用graphql-tag 库来完成。它也可以通过 webpack 自动完成，使用像 graphql-tag's loader 或 graphql-loader 这样的加载器。如果您使用这样的加载器，那么您导入的任何.gql 文件都会自动为您解析为DocumentNode 对象。

如果您不使用apollo-client，则无需使用这些加载程序。如果您仍想将查询存储在单独的文件中并将它们作为字符串导入，则应使用不同的加载器，例如 raw-loader。

【讨论】：