变量与模板文字插值

Posted

技术标签:

【中文标题】变量与模板文字插值【英文标题】:Variables versus template literal interpolation 【发布时间】:2016-09-17 03:39:17 【问题描述】:

在任何情况下您应该在 Apollo 查询中使用 $foo 而不是 variables: foo: foo

【问题讨论】:

【参考方案1】:

您可以在 GraphQL 查询中使用变量做很多事情!

显然,您可以将变量作为参数传递给各个字段 您还可以使用@skip and @include directives 修改查询中的字段

通过结合这两个工具以及未来可能的其他工具,基本上不需要进行字符串插值。

为什么 GraphQL 查询中的字符串插值不好?好吧,出于几个原因,最好将 GraphQL 查询字符串视为静态对象,而不是要操作的字符串:

    您可能会意外地对无效查询进行字符串操作。如果你没有正确地转义一些参数,你最终可能会得到一个返回错误的查询或一些你没想到的完全不同的数据。变量是 JSON 编码的,因此无需转义它们。 如果您的查询是动态生成的,则无法使用eslint-plugin-graphql 等工具对其进行静态分析,因此您无法在不实际运行代码的情况下检查您的查询是否有效。 如果查询由许多不同的字符串组成,其他开发人员将更难以理解返回数据的形状。如果其中有任意 javascript 代码,您也不能将查询复制粘贴到 GraphiQL 之类的东西中尝试运行它。

简而言之,有很多机会可以用 GraphQL 查询字符串做一些很酷的事情,但是一旦你开始使用任意代码来操作它们,就会变得更加困难或不可能。所以我的建议是,坚持变量。

【讨论】:

【参考方案2】:

TL;DR 不,不要在模板中使用字符串插值。它搞砸了任何可以做的静态分析。

【讨论】:

以上是关于变量与模板文字插值的主要内容,如果未能解决你的问题,请参考以下文章

Vue模板语法——插值

vue入门:(模板语法与指令)

Grafana:通过转义 $ 避免变量插值

Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑

2019-11-22组件与模板 -- 显示数据

如果浏览器不支持ES6模板文字,则创建错误消息