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

问题描述

我需要一个可重用的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？这些参数与文档中的代码示例兼容吗？

解决方法

感谢Daniel Roe的帮助。为了将占位符读为变量，必须将其用引号引起来，如下所示：

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