如何使用 angular 和打字稿从 .graphql 文件加载查询

Question

我正在使用 Angular 和 Ionic 开发应用程序。作为后端，我有一个节点服务器运行ning ApolloServer with Neo4j（使用 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 文件中工作时使用更好的工具，老实说，这主要是因为查询现在伤害了我的眼睛:)

我想要这样（文件：queries.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 一起使用。我看过 answer but from what I can gather it has to do with ApolloServer. I want to simply parse the graphql queries on the client. I found this 篇接近我需要的文章，但它也与 ApolloServer 有关。我正在使用 Angular 8.1.2

带有 angular 的 Apollo 文档中的所有示例都显示了我目前使用字符串构建查询的方式以及 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(....)

如何使用 angular 和打字稿从 .graphql 文件加载查询

How to load query from .graphql file with angular and typescript

typescript

apollo

graphql

angular