angular - 如何使用 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 加载器添加到您的 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(....)