Is there a way to retrieve the `this.$route` data while using vue-apollo?

Question

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Currently working on building a GraphQL query with vue-apollo and graphql-tag.

When I manually set the ID, everything runs smoothly. However, I'm aiming to dynamically pass the current route's ID as a variable to Vue Apollo.

Successful Implementation (using hardcoded ID):

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

Yet, attempting to access this.$route for the ID results in:

Unsuccessful Attempt (trying to retrieve ID from this.$route):

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

The error displayed is:

Uncaught TypeError: Cannot read property 'params' of undefined

Is there a workaround for achieving this functionality?

EDIT: Complete script block provided below for better context:

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

javascript vue.js graphql vue-apollo

Answer 1

Answer №1

You won't be able to retrieve the "this" object in this manner:

variables: {
  id: this.$route.params.id // This will cause an error! 
}

However, you can do it this way:

variables () {   
    return {
         id: this.$route.params.id // This will work just fine!  
    }
}

Answer 2

You won't be able to retrieve the "this" object in this manner:

variables: {
  id: this.$route.params.id // This will cause an error! 
}

However, you can do it this way:

variables () {   
    return {
         id: this.$route.params.id // This will work just fine!  
    }
}

Answer 3

Answer №2

When you refer to the documentation (specifically in the Reactive Parameters section) of vue-apollo, you will learn that you can utilize Vue reactive properties by simply using this.propertyName. To implement this, initialize the route parameters to a data property and then use it in your apollo object as shown below:

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 4

When you refer to the documentation (specifically in the Reactive Parameters section) of vue-apollo, you will learn that you can utilize Vue reactive properties by simply using this.propertyName. To implement this, initialize the route parameters to a data property and then use it in your apollo object as shown below:

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 5

Answer №3

Although the provided answer is accurate for the specific example given by the poster, it may be unnecessarily complex when dealing with simple queries.

In this particular scenario, this does not refer to the component instance, making it impossible to access this.$route

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

However, you can easily replace it with a function and achieve the desired functionality.

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

No need to introduce additional props.

Answer 6

Although the provided answer is accurate for the specific example given by the poster, it may be unnecessarily complex when dealing with simple queries.

In this particular scenario, this does not refer to the component instance, making it impossible to access this.$route

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

However, you can easily replace it with a function and achieve the desired functionality.

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

No need to introduce additional props.

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?

Performing an Ajax request to the server and then sending the retrieved data back to Charts.js

Initiate an AJAX call

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

Error occurs in ReactJS App when the state is updated in Redux only after dispatching the same action twice

Modifying npm packages within a web application

React Scroll and Material-UI button active link not functioning correctly

Is the `document.documentElement` consistently defined and always representing the HTML element?

add the elements of an array to multiple div elements sequentially

Refining Flask-Generated Table Content with jQuery Filters

Reveal or Conceal Information Depending on Cookie Status

Expanding and shrinking the index within a specific circular boundary in JavaScript

Leveraging Vue.js and TypeScript: accessing the type of the child component through refs

Using a personalized function in JQuery

Trigger the fire event on .click() except when text is being selected

Bundling sub-components using Rollup for NodeJS application packaging

Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

Troubleshooting AngularJS: Diagnosing Issues with My Watch Functionality

Button activates SVG animation