阿波罗查询取决于另一个查询的结果

时间:2019-06-24 02:40:52

标签: vue.js apollo nuxt.js

我正在尝试创建一个Apollo查询(在Vue / Nuxt中),该查询取决于另一个查询的结果。

sessions需要person才能使用this.person.id。在获取person的数据之前,如何确保sessions存在?

我的脚本和查询如下。这两个查询在GraphiQL中都可以正常工作。谢谢!

JS

  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
  }
}`

2 个答案:

答案 0 :(得分:0)

我设法通过将会话分成单独的部分来解决此问题。

是处理这种情况的适当方法,还是在这里链接请求有更好的方法?如果有办法,我仍然不介意听到其他答案。

答案 1 :(得分:0)

我认为最好的方法是为您的数据模型提供合适的图形,例如:

type Person {
  name: String!
  bio: String
  affiliation: String
  id: ID!
  photo: Photo
  sessions(filter: SessionFilter): SessionList!
}
  

使用GraphQL,您可以将业务域建模为图形

     

图是建模许多现实世界现象的强大工具,因为它们类似于我们的自然思维模型和对过程的口头描述。使用GraphQL,您可以通过定义模式将业务域建模为图形。在您的模式中,您定义了不同类型的节点以及它们如何相互连接/关联。在客户端,这会创建类似于面向对象编程的模式:引用其他类型的类型

您可以在official docucmentation

中阅读更多内容