graphql - 抑制 GraphQL : Syntax Error in VS Code when using template string

Question

FYI: There are a ton of other posts concerning GraphQL Syntax Error in VS Code. I read many of them, but did not find anything relevant to this. My apologies if I missed it in the similar questions.

环境:

• VS Code v.1.51.1
• Windows 10 x64 19041
• https://github.com/apollographql/apollo-tooling v.1.17.0
• React Typescript 应用

我有一个使用 useQuery Hook 的组件。该查询是从另一个查询中检索的，并通过类型为 string 的变量进入。为了使 useQuery 正确使用 graphql 查询，首先必须将其制作成一个 DocumentNode，为此我使用 graphql-tag npm 包中的 gql。生成的代码片段如下所示:

...
const PREPARED_QUERY = useMemo(() => gql`${query}`, [query])
const data = useQuery(PREPARED_QUERY, queryOptions)
...

这是工作代码，但 Apollo GraphQL 扩展在这一行抛出警告:

Syntax Error: Unexpected <EOF>.GraphQL: Syntax

我理解这是因为它正在检查查询字符串以确保其格式正确并且它不理解模板字符串“hack”。

问题:

1. 这可以是用某种形式的忽略评论的沉默吗？
2. 如果没有，有什么方法可以构造这个，使这个模板字符串通过语法检查吗？

Answer 1

看起来像 vscode 扩展的一个已知问题 - 没有已知的解决方案:) https://github.com/graphql/vscode-graphql/issues/137 .

解决方法

由于 gql 只是一个函数，您可以直接调用它，这样扩展程序就不会尝试解析它并停止提示。

gql(query)

解释为什么它有效

如果我们看一下tagged templates docs ，我们将看到它是一个常规函数，它将静态字符串片段数组作为第一个参数，并将内插表达式作为其余参数。所以当我们这样做的时候

gql`some content`

它转换为以下函数调用:

gql(["some content"]) // a single argument, because there is no interpolations here

此外，这个 gql 函数内部有特殊代码，允许将纯字符串作为第一个 arg 传递(可能是为了支持不存在模板标签的旧 JS)