如何从带有角度和打字稿的. graph ql文件加载查询

提问者：小点点

如何从带有角度和打字稿的. graph ql文件加载查询

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

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

    return query;
};

我正在使用apollo，所以我这样做来运行我的graph ql查询

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

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

我想这样（文件：query. graph ql）：

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

然后当我用Apollo执行graph ql查询时，我想做这样的事情：

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

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

Apollo留档中的所有示例都显示了我目前使用字符串构建查询的方式和使用gql（graph ql-tag）的示例。

共1个答案

匿名用户

首先根据apollo文档将webpack加载器添加到您的webpack配置中。

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

您不必在. graph ql文件中对变量使用双引号。所以你的query.graph ql必须是这样的：

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