如何从带有角和打字稿的.graphql文件中加载查询

问题描述

我正在使用Angular和Ionic开发应用程序.作为后端，我有一个运行带有Neo4j的ApolloServer的节点服务器(使用grandstarter.io).在客户端，我目前有一个名为querys.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;
};

我正在使用阿波罗，所以我这样做是为了运行我的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查询.我发现这篇文章与我需要的内容很接近，但也与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文件中使用双引号.因此，您的query.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文件中加载查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！