Querying data - Gridsome

Querying data - Gridsome
Prologue
Introduction
Core concepts
Fast by default
Deployment
Basic Gridsome
Directory structure
Project configuration
Pages
Collections
Templates
Layouts
Components
Linking
Dynamic Routing
Image processing
Populating
Environment Variables
Working with data
GraphQL data layer
Importing data
Querying data
Filtering data
Taxonomy pages
Paginate data
Global metadata
Client-side data
Styles and Assets
Use CSS in Gridsome
Add custom fonts
Add external scripts
Add SVG icons
Guides
Add a form
Add a search
Add comments
Add Netlify CMS
Overriding index.html
Overriding App.vue
Page transitions
body & html attributes
API Reference
Gridsome CLI
Server API
Data store API
Schema API
Pages API
Client API
Transformer API
Deploy
Netlify
AWS Amplify
Vercel
Amazon S3
GitLab Pages
GitHub Pages
Google Cloud Platform
Surge.sh
21YunBox
Azure Static Web Apps
IONOS Deploy Now
Contribute
How to contribute
How to create a plugin
Code of conduct
Help
Prerequisites
How to upgrade
Troubleshooting
Dev tools
FAQ
Querying data
You can query data from the GraphQL data layer into any
Page, Template or Component
. Queries are added with a

or

block in Vue Components.
Use

in
Pages & Templates
Use

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

). 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.
Argument
Default
Description
sortBy
"date"
Sort by a node field.
order
DESC
Sort order (
DESC
or
ASC
).
sort
Sort by multiple node fields.
skip
How many nodes to skip.
limit
How many nodes to get.
page
Which page to get.
perPage
How many nodes to show per page. Omitted if no
page
argument is provided.
filter
{}
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
Argument
Default
Description
id
null
Get node by
id
Example query
query
post
id
"1"
title
Query data in Page components
Every
page
can have a

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

block with a GraphQL query to fetch data from data sources. The results will be stored in a
$static
property inside the component. A

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
Edit this page on GitHub
On this page
How to query with GraphQL
Querying collections
Querying single nodes
Query data in Page components
Multiple Queries in Page components
Query data in any component
Functional component support