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

本文是小编为大家收集整理的关于如何用angular和typescript从.graphql文件加载查询的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我正在使用具有角和离子的应用程序.作为后端，我使用Neo4J(使用GrandStarter.io)运行Apolloserver的节点服务器.在客户端，我当前有一个名为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文件中工作时，更好的工具，老实说，这主要是因为查询现在伤害了我的眼睛:)

我想这样拥有它(file: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一起使用. 我已经看了看 this 与apolloserver一起使用.我想简单地解析客户端上的GraphQl查询.我发现这篇文章接近我所需的内容，但它也与Apolloserver有关.我正在使用Angular 8.1.2

带有Angular的Apollo文档中的所有示例显示了我当前使用字符串和使用GQL(GraphQL-TAG)的查询方式的示例.

推荐答案

首先根据 apollo document .

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(....)

本文地址：https://www.itbaoku.cn/post/1938091.html

百度翻译此文有道翻译此文

问题描述

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;
};

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

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

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 :)

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

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

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(....)

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

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).

推荐答案

First add webpack loader to your webpack config according to apollo document.

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

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(....)

上一篇：阿波罗客户端。网络错误{"类型": "WriteError"}。

下一篇：为什么我们需要`cacheRedirects'？