Multiple Graphql Queries on a Single Page with Gridsome

#gridsome #graphql #html

Ever wonder how include multiple queries on the same page, when using Gridsome? Well, this is how.

Let's say you have the following queries:

// query details about the current blog post 
query Post ($path: String!) {
  post: post (path: $path) {
    title
    date (format: "MMMM D, Y")
    content
    path
  }

and

// query to pull all the webmentions on a specific post
query($path: String!) {
    mentions: allWebMention(filter: { wmTarget: { regex: $path } }) {
      edges {
        node {
          wmId
          wmProperty
          content {
            text
          }
          author {
            name
          }
        }
      }
    }
  }

The question is: How do you get both of those queries in your Post.vue template?

I was going to give you all the options that I tried before making this work, but that would be the waste of your time. So here is he working version:

<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    date (format: "MMMM D, Y")
    content
    path
  }
  mentions: allWebMention (filter: { wmTarget: { regex: $path } }) {
    totalCount
    edges {
      node {
        wmId
        wmProperty
        content {
          text
        }
        author {
          name
        }
      }
    }
  }
}
</page-query>

Then you can access these queries like this:

<div>{{ $page.post.title }}</div>

<div 
v-for="mention in $page.mentions.edges"
:key="mention.node.wmId"
>
    <p>{{ mention.node.wmProperty }}</p>
    <p>{{ mention.node.content.text }}</p>
</div>