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 <head> 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

Contribute

How to contribute How to create a plugin Code of conduct

Help

Prerequisites How to upgrade Troubleshooting Dev tools FAQ

The GraphQL data layer

Import data

The GraphQL data layer is a tool available in development mode. This is where all of the data imported into a Gridsome project is temporarily stored. Think of it as a local database that helps you work faster and better with your data.

Data coming from the GraphQL data layer is generated into static content. There is no real-time connection between the data layer and the source the data is imported from. This means you need to re-generate the website to get the latest data updates.

If you need dynamic data you should use client-side data.

💡 Pages and Site metadata are added to the data layer by default.

Working with data

The GraphQL explorer

Every Gridsome project has a GraphQL explorer (Playground) that can be used to explore and test queries when in development mode. Here you also get a list of all available GraphQL collections. This can usually be opened by going to http://localhost:8080/___explore.

graphql-explorer

Edit this page on GitHub

On this page