GraphQL-在阿波罗查询中使用变量

时间:2020-02-07 21:41:04

标签: graphql apollo nuxt.js

我正在Nuxt项目中使用apollo和graphql,想通过一个唯一的属性进行查询,但是在不使它变得有些小问题的情况下无法弄清楚该查询。

这是当前通过ID获取的工作查询:

query Category($id: ID!) {
  category(id: $id) {
    name
    designs {
      id
      project_name
      images {
        url
      }
    }
  }
}

在Nuxt中使用此设置:

...

data() {
  return {
    category: []
  }
},


apollo: {
  design: {
    prefetch: true,
    query: designQuery,
    variables() {
      return { id: this.$route.params.id }
    }
    }
}

...

我想使用名称来获取它,因为名称应该是mongoDB中的唯一字段。这是我最接近该版本的工作版本。唯一的问题是,我将其作为一个数组来获取,而当使用路由器链接在不同的_name.vue页面之间进行切换时,Nuxt确实很奇怪。

query Category($name: String) {
  categories(where: { name: $name }) {
    name
    designs {
      id
      project_name
      images {
        url
      }
    }
  }
}

它起作用了(阿波罗设置已更改为匹配),因为它返回了与名称匹配的类别数组。但是,无论何时我从说categories/foocategories/bar。 Nuxt不需要任何。读起来很简单,只是锁在几个v-if后面,告诉我它无法读取未定义的category[0].name。对我来说这没有意义,因为您加载的第一页可以正常工作并且可以正确加载。

...

<div v-if="category[0] !== undefined && category[0] !== null">
  <h1 v-if="category[0].name !== undefined">{{ category[0].name }}</h1>
  <Designs :designs="category[0].designs || []"></Designs>
</div>

...

0 个答案:

没有答案