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

Question

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

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

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

Answer 1

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

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

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

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

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

至此，您正在获取查询并将响应保存在 queryResponse

Answer 2

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

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

Answer 3

现在 raw-loader 已弃用，您可以像这样加载它们。

在 webpack 配置中

 module: {
  rules: [
    {
      test: /\.gql/,
      type: "asset/source",
    },
  ],
},

然后导入

import myGraphQlQuery from "myGraphQlQuery.gql"

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

How to import GraphQL query as a string instead of an object

vue.js

graphql

graphql-js

graphql-tag