DEV Community

loading...

Multiple Graphql Queries on a Single Page with Gridsome

rasulkireev profile image Rasul Kireev Originally published at rasulkireev.com on ・1 min read

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>

If you have any thougths, comments or questions please let me know on Twitter.

Discussion (0)

Forem Open with the Forem app