如何使用 angular 和 typescript 从 .graphql 文件加载查询

Question

我正在开发一个使用 Angular 和 Ionic 的应用程序。作为后端，我有一个运行带有 Neo4j 的 ApolloServer 的节点服务器（使用 grandstarter.io）。在客户端，我目前有一个名为 queries.ts 的文件，我在其中定义了我的 graphql 查询，如下所示：

supplierByName = (value) => {
    const query = gql`
    {
        Supplier(filter: {name: "${value}"}) {
            name
        }
    }
    `;

    return query;
};

我正在使用 apollo，所以我这样做是为了运行我的 graphql 查询

this.apollo.query({
                query: this.queries.supplierByName(supplierName)
            })
            .subscribe(....)

现在，由于不喜欢将我的 graphql 查询作为字符串，我希望将我的查询直接放在 .graphql 文件中。直接在 graphql 文件中工作时更好的工具，老实说，这主要是因为查询现在伤害了我的眼睛 :)

我想要这样（文件：querys.graphql）：

query supplierByName($value: String) {
 Supplier(filter: { name: "$value}" }) {
    name
 }
}

然后当我使用 Apollo 执行 graphql 查询时，我想做这样的事情：

 import supplierByName from './queries.graphql'
 .....
 this.apollo.query({
                query: supplierByName(supplierName)
            })
            .subscribe(....)

并以某种简单的方式将它与 apollo 一起使用。 我看过this 的答案，但据我所知，它与ApolloServer 有关。我想简单地解析客户端上的 graphql 查询。我发现 this 文章接近我需要的内容，但它也与 ApolloServer 有关。我正在使用 Angular 8.1.2

Apollo 文档中的所有带有 Angular 的示例都显示了我目前使用字符串构建查询的方式以及使用 gql (graphql-tag) 的示例。

Answer 1

首先根据apollo document将webpack loader添加到你的webpack配置中。

loaders: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  }
]

您不必在 .graphql 文件中为变量使用双引号。所以你的 queries.graphql 必须是这样的：

query supplierByName($value: String) {
 Supplier(filter: { name: $value }) {
    name
 }
}

最后你必须将变量传递给你的查询，如下所示：

import supplierByName from './queries.graphql'
 .....
 this.apollo.query({
  query: supplierByName,
  variables: {
    value: supplierName, // your value
  }
})
  .subscribe(....)