back to posts

Multiple Graphql Queries on a Single Page with Gridsome

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.

Share

If you enjoyed this post, or found it useful, please consider signing up to my newsletter. Every week, I share my thoughts on cool stuff I found around the internet. No spam, ever. Unsubscribe any time.

2 Webmentions

Want to respond? Reply, like, reply or bookmark on Twitter :)

1 Likes

1 Retweets