pass variable into GraphQL query in Gridsome/Vue.js

Question

I have a Vue.js app running with a GraphQL backend, and Gridsome as the Vue.js boilerplate generator.

I'm trying to write a GraphQL query to only return the data of the logged in user, like this :

query Blah($test: String!) {
  db {
  settings (where: {user_id: {_eq: $test}})
  {
    key
    value
  }
}

with the $test variable defined here:

export default {
    data() {
        return {
            test: "Va123",
            user: null
        };
    }
}

But I get this error message:

An error occurred while executing query for src/pages/Profile.vue

Error: Variable "$test" of required type "String!" was not provided.

This is for a Girdsome page, not a template

Answer 1

It looks like the only way is to create pages programmatically using createPage() and pass the page context variable down the the page-query.

https://gridsome.org/docs/pages-api/#the-page-context