在模板文本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: '' }),
}

但是，如果我尝试使用一个变量作为查询模板文本中的占位符(如建议的那样(${place夹子})，它将无法工作。

这不管用：

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

编辑

在Sanity模块的Github存储库示例中，他们使用这些代码来实现我正在寻找的目标：

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 }),
})

遗憾的是，这些解决方案没有出现在文档中。

他们为什么要进口Vue？这些参数与文档中的代码示例一起工作吗？

Answer 1

感谢丹尼尔·罗伊的帮助。对于要作为变量读取的占位符，必须引用它，如下所示：

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