如何使用角度和打字稿从 .graphql 文件加载查询 [英] How to load query from .graphql file with angular and typescript

问题描述

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

I am working on an app with Angular and Ionic. As a backend I have a node server running ApolloServer with Neo4j (using grandstarter.io). On the client-side I currently have a file called queries.ts where I have defined my graphql queries like this:

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

    return query;
};

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

I am using apollo so I am doing like this to run my graphql query

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

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

Now, due to not liking to have my graphql queries as strings I would like to have my queries in a .graphql file directly. Better tooling when working directly in a graphql file and honestly its mostly because the queries hurt my eyes right now :)

我想要这样(文件:querys.graphql):

I would like to have it like this(file: queries.graphql):

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

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

then when I execute graphql query with Apollo I would like to do something like this:

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

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

and use it with apollo in some easy way. I have looked at this 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 article that came close to what I need but it also has to do with ApolloServer. I am using Angular 8.1.2

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

All the examples in the Apollo documentation with angular shows examples with the way I currently have built my queries with strings and the use of gql (graphql-tag).

推荐答案

首先根据 阿波罗文件.

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

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

You not must use double quotation in .graphql file for variables. So your queries.graphql must be like this:

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

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

And the last you must pass variables to your query as follows:

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

这篇关于如何使用角度和打字稿从 .graphql 文件加载查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！