#Querying data

You can query data from the GraphQL data layer into any Page, Template or Component. Queries are added with a <page-query> or <static-query> block in Vue Components.

• Use <page-query> in Pages & Templates.
• Use <static-query> in Components.

#How to query with GraphQL

Working with GraphQL in Gridsome is easy and you don't need to know much about GraphQL. Here is an example of how to use GraphQL in page-query for a page:

<template>
  <div>
    <div v-for="edge in $page.posts.edges" :key="edge.node.id">
      <h2>{{ edge.node.title }}</h2>
    </div>
  </div>
</template>

<page-query>
query {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

With GraphQL you only query the data you need. This makes it easier and more tidy to work with data. A query always starts with query and then something like Posts(Can be anything). Then you write something like posts: allWordPressPost. The allWordPressPost is the name of the GraphQL collection you want to query. The posts: part is an optional alias. When using posts as alias, your data will be available at $page.posts (or $static.posts if you use <static-query>). Otherwise it will be available at $page.allWordPressPost.

Learn more about GraphQL queries

#Querying collections

You will notice that some of the root fields in your schema are prefixed with all. Use them to get lists of nodes in a collection.

#Find nodes sorted by title

query {
  allPost(sortBy: "title", order: DESC) {
    edges {
      node {
        title
      }
    }
  }
}

#Sort a collection by multiple fields

query Posts {
  allPost(sort: [{ by: "title" }, { by: "date" }]) {
    edges {
      node {
        title
      }
    }
  }
}

#Sort a collection by multiple fields and different ordering

query Posts {
  allPost(sort: [{ by: "date", order: DESC }, { by: "title", order: ASC }]) {
    edges {
      node {
        title
      }
    }
  }
}

#Querying single nodes

The other fields that do not start with all are your single entries. They are typically used by templates to get data for the current page. You must provide either an id or a path as an argument to find the node.

#Arguments

#Example query

query {
  post(id: "1") {
    title
  }
}

#Query data in Page components

Every page can have a <page-query> block with a GraphQL query to fetch data from data sources. The results will be stored in a $page property inside the page component.

<template>
  <Layout>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.posts.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>
  </Layout>
</template>

<page-query>
query {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

#Multiple Queries in Page components

If you need to make multiple GraphQL queries, here is how you do it. The results will be stored in a $page property inside the page component and you can further differentiate by specifying the query name.

<template>
  <Layout>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.posts.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>

    <h2>Latest book reviews</h2>
    <ul>
      <li v-for="edge in $page.books.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>
  </Layout>
</template>

<page-query>
query {
  posts: allWordPressPost {
    edges {
      node {
        id
        title
      }
    }
  }
  books: allBooks {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

#Query data in any component

Every Vue component can have a <static-query> block with a GraphQL query to fetch data from data sources. The results will be stored in a $static property inside the component. A <static-query> is named static as it cannot accept any variable.

<template>
  <div v-html="$static.post.content" />
</template>

<static-query>
query {
  post(id: "1") {
    content
  }
}
</static-query>

#Functional component support

In functional components a $static property is exposed within the render function at context.data.$static

<static-query>
query {
  post(id: "1") {
    content
  }
}
</static-query>

<script>
export default {
  functional: true,
  render(createElement, context) {
    const { content } = context.data.$static.post
  
    return createElement('div', {
      domProps: {
        innerHTML: content
      },
    })
  }
}
</script>