我正在尝试创建一个Apollo查询(在Vue / Nuxt中),该查询取决于另一个查询的结果。
sessions
需要person
才能使用this.person.id
。在获取person
的数据之前,如何确保sessions
存在?
我的脚本和查询如下。这两个查询在GraphiQL中都可以正常工作。谢谢!
import gql from 'graphql-tag'
import Photo from '~/components/Photo.vue'
import Session from '~/components/Session.vue'
import {Route} from 'vue-router'
import { currentPerson, currentPersonSessions } from '~/apollo/queries.js'
export default {
name: 'Speaker',
props: ['slug', 'id', 'person'],
data() {
return {
title: 'Speaker',
routeParam: this.$route.params.slug
}
},
apollo: {
person: {
query: currentPerson,
loadingKey: 'loading',
variables() {
return {
slug: this.routeParam
}
}
},
sessions: {
query: currentPersonSessions,
loadingKey: 'loading',
variables() {
return {
itemId: this.person.id
}
}
}
},
components: {
Photo,
Session
}
}
export const currentPerson = gql `query ($slug: String!) {
person(filter: { slug: { eq: $slug }}) {
name
bio
affiliation
id
photo {
url
}
}
}`
export const currentPersonSessions = gql `query($itemId: ItemId!) {
allSessions (filter: { speakers: { anyIn: [$itemId] }}) {
title
slug
start
end
}
}`
答案 0 :(得分:0)
我设法通过将会话分成单独的部分来解决此问题。
是处理这种情况的适当方法,还是在这里链接请求有更好的方法?如果有办法,我仍然不介意听到其他答案。
答案 1 :(得分:0)
我认为最好的方法是为您的数据模型提供合适的图形,例如:
type Person {
name: String!
bio: String
affiliation: String
id: ID!
photo: Photo
sessions(filter: SessionFilter): SessionList!
}
中阅读更多内容使用GraphQL,您可以将业务域建模为图形
图是建模许多现实世界现象的强大工具,因为它们类似于我们的自然思维模型和对过程的口头描述。使用GraphQL,您可以通过定义模式将业务域建模为图形。在您的模式中,您定义了不同类型的节点以及它们如何相互连接/关联。在客户端,这会创建类似于面向对象编程的模式:引用其他类型的类型