Question

我正在使用vue-apollo和graphql-tag构建GraphQL查询。

如果我硬编码我想要的ID，它可以工作，但我想将当前的路径ID作为变量传递给Vue Apollo。

有效吗（硬编码ID）：

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: 'my-long-id-example'
      }
    }
  }

但是，我无法做到这一点：

无法正常工作（尝试访问此ID。路由获取ID）：

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: this.$route.params.id
      }
    }
  }

我收到错误：

未捕获的TypeError：无法读取属性＆＃39; params＆＃39;未定义的

有没有办法做到这一点？

编辑：完整的脚本块可让您更轻松地查看正在进行的操作：

<script>
import gql from 'graphql-tag'

const PropertyQuery = gql`
  query Property($id: ID!) {
    Property(id: $id) {
      id
      slug
      title
      description
      price
      area
      available
      image
      createdAt
      user {
        id
        firstName
        lastName
      }
    }
  }
`

export default {
  name: 'Property',
  data () {
    return {
      title: 'Property',
      property: {}
    }
  },
  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: this.$route.params.id // Error here!
      }
    }
  }
}
</script>

Answer 1

读取vue-apollo的documentation（参见“反应参数”部分），您可以使用this.propertyName使用vue反应属性。所以只需将路径参数初始化为数据属性，然后在你的apollo对象中使用它，就像这样

export default {
  name: 'Property',
  data () {
    return {
      title: 'Property',
      property: {},
      routeParam: this.$route.params.id
    }
  },
  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
         // Reactive parameters
      variables() {
        return{
            id: this.routeParam
        }
      }
    }
  }
}

Answer 2

您不能像这样访问“此”对象：

variables: {
  id: this.$route.params.id // Error here! 
}

但是您可以这样：

variables () {   
    return {
         id: this.$route.params.id // Works here!  
    }
}

Answer 3

虽然接受的答案对于海报的例子是正确的，但如果你使用简单的查询，它就比必要的复杂得多。

在这种情况下，this不是组件实例，因此您无法访问this.$route

apollo: {
  Property: gql`{object(id: ${this.$route.params.id}){prop1, prop2}}`
}

但是，你可以简单地用一个函数替换它，它会像你期望的那样工作。

apollo: {
  Property () {
    return gql`{object(id: ${this.$route.params.id}){prop1, prop2}}`
  }
}

无需设置额外的道具。

如何在vue-apollo中访问此。$ route？

3 个答案: