如何使用angular和typescript从.graphql文件中加载查询
如何使用angular和typescript从.graphql文件中加载查询
提问于 2019-11-01 16:43:34
我正在开发一个带有Angular和Ionic的应用程序。作为后端，我有一个运行ApolloServer和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中使用它。我看过this answer，但据我所知，它与ApolloServer有关。我想简单地解析客户端上的graphql查询。我找到了接近我需要的this文章，但它也与ApolloServer有关。我使用的是Angular 8.1.2
使用angular的Apollo文档中的所有示例都显示了我目前使用字符串和gql (graphql-tag)构建查询的方式的示例。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-08 00:59:08
首先，根据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(....)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58656316
复制相关文章
相似问题
腾讯云开发者
