How can I access this.$route from within vue-apollo?

Question

I'm constructing a GraphQL query using vue-apollo and graphql-tag.

If I hardcode the ID I want, it works, but I'd like to pass the current route ID to Vue Apollo as a variable.

Does work (hardcoded ID):

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

However, I'm unable to do this:

Doesn't work (trying to access this.$route for the ID):

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

I get the error:

Uncaught TypeError: Cannot read property 'params' of undefined

Is there any way to do this?

EDIT: Full script block to make it easier to see what's going on:

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

@VamsiKrishna Thanks for the reply. It's an object that sits on the default export. I have updated my question to show this in context. — Michael Giovanni Pumo, Jul 14 '17 at 10:33

score 12 · Answer 1 · answered Sep 10 '19 at 19:21

12

You can't have access to "this" object like that:

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

But you can like this:

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

answered Sep 10 '19 at 19:21

Jonas

691
6
4

Vamsi Krishna · Accepted Answer · 2017-07-14T11:05:07.080

9

Readimg the documentation( see Reactive parameters section) of vue-apollo you can use vue reactive properties by using this.propertyName. So just initialize the route params to a data property as then use it in you apollo object like this

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

edited Jul 14 '17 at 11:05

answered Jul 14 '17 at 10:48

Vamsi Krishna

30,568
8
70
78

Yep this worked! Thank you. So variables becomes a function that returns an object instead of directly being an object itself. Thanks! – Michael Giovanni Pumo Jul 14 '17 at 11:17
1

@MichaelGiovanniPumo happy to help and to be frank i read the docs and learned something new, so thanks to you too :) – Vamsi Krishna Jul 14 '17 at 11:19

score 5 · Answer 3 · answered May 07 '18 at 11:50

While the accepted answer is correct for the poster's example, it's more complex than necessary if you're using simple queries.

In this case, this is not the component instance, so you can't access this.$route

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

However, you can simply replace it with a function, and it will work as you might expect.

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

No need for setting extra props.

How can I access this.$route from within vue-apollo?

3 Answers3