How do you use the queried GraphQL data in the <script>?

I’m using a simple query to fetch the site name:

<static-query>
  query {
    metaData {
      siteName
      siteDescription
    }
  }
</static-query>

I want to set this name as the site title. The default template for site titles is %s - Site Title, but for this page, I only want to set it to Site Title. I would like the use the queried data so that I do not have to update it in case I change the value of siteTitle in module.exports.

This is what I tried:

<script>
export default {
  metaInfo: {
    // title: 'Site Title',  <--- not using this because it makes the title "Site Title - Site Title"
    titleTemplate: static.metaData.siteName
  },
}
</script>

But it was giving an error. I also tried putting a $ in front of static, but it returned undefined. Is it possible to do this?

[bbugh]

Hi @themindstorm, this is a common sticking point with Vue. this is dynamically injected into Vue instances only when the context is evaluated. To have access to “this”, the context needs to be a function. In this case, changing metaInfo from an object to a function with a return will fix your issue:

// metaInfo doesn't have access to the Vue instance
metaInfo: {
  title: 'Index',
  titleTemplate: this.$static.metaData.siteName,  // <-- "this" is undefined
},

// Use a function for metaInfo instead
metaInfo() {
  return {
    title: 'Index',
    titleTemplate: this.$static.metaData.siteName,  // <-- "this" is the Vue instance with $static
  }
},

[dargmuesli]

@bbugh is there any reason to use the function-less approach? Otherwise I’d update the docs to explain the way to do it with a function.