我正在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/foo
到categories/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>
...