抑制 GraphQL:使用模板字符串时 VS 代码中的语法错误

Suppress GraphQL: Syntax Error in VS Code when using template string

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.

环境:

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

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

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

Syntax Error: Unexpected <EOF>.GraphQL: Syntax

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

问题:

  1. 这可以通过某种形式的忽略评论来保持沉默吗?
  2. 如果没有,请问有什么方法可以构造这个,让这个模板字符串通过语法检查吗?

看起来像是 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)