在模板文字 GROQ 查询中使用变量/占位符 - @nuxtjs/sanity

Question

我需要一个可重用的 Nuxt 组件，它可以从 Sanity.io 获取一些数据。我正在使用@nuxtjs/sanity 包，所以查询如下所示：

import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "article"][0].title`

export default {
  async fetch() {
    const result = await this.$sanity.fetch(query)
    this.title = result
  },
  data: () => ({ title: '' }),
}

但是，如果我尝试按照建议 (${placeholder}) 将变量用作查询模板文字中的占位符，它将不起作用。

这不起作用：

const placeholder = 'article'
const query = groq`*[_type == ${placeholder}][0].title`

编辑

在 Sanity 模块的Github repository example 中，他们使用这段代码来实现我想要的：

import Vue from 'vue'
import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "movie" && slug.current == $slug][0] {
  title,
  releaseDate,
  castMembers[] {
    characterName
  },
  overview
}`

interface QueryResult {
  title: string
  releaseDate: string
  castMembers: Array<{ characterName: string }>
  overview: any[]
}

export default Vue.extend({
  components: {
    LocalSanityImage: SanityImage,
  },
  async fetch () {
    const movieDetails = await this.$sanity.another.fetch<QueryResult>(query, {
      slug: this.$route.params.slug,
    })
    this.details = movieDetails
  },
  data: () => ({ details: null as null | QueryResult }),
})

很遗憾这些解决方案没有出现在documentation 中。

他们为什么要导入 Vue？这些参数是否适用于文档中的代码示例？

Answer 1

感谢Daniel Roe 的帮助。对于要作为变量读取的占位符，它必须被引用，如下所示：

const placeholder = 'article'
const query = groq`*[_type == "${placeholder}"][0].title`