Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (83 sloc) 3.22 KB


Boilerplate to get started with Gridsome, Hasura GraphQL engine as CMS and postgres as database using the awesome plugin source-graphql.

Edit gridsome-postgres-graphql

Gridsome Postgres GraphQL


  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to heroku

  • Get the Heroku app URL (say

  • Create author table:

    Open Hasura console: visit on a browser
    Navigate to Data section in the top nav bar and create a table as follows:

    Create author table

  • Insert sample data into author table:

    Insert data into author table

    Verify if the row is inserted successfully

    Insert data into author table

  • Similarly, create an article table with the following data model: table: article columns: id, title, content, author_id (foreign key to author table's id) and created_at

    Create foreign key for author_id column to author's id

  • Now create a relationship from article table to author table by going to the Relationships tab.

  • Install Gridsome CLI tool if you don't have

npm install --global @gridsome/cli

  • Install node modules:

    yarn install
  • Configure Gridsome to use source-graphql plugin and a connection GraphQL url to stitch the schema. Open the file gridsome.config.js and modify the plugin section to configure the GraphQL Endpoint.

  plugins: [
      use: '@gridsome/source-graphql',
      options: {
        url: 'http://localhost:8080/v1/graphql',
        fieldName: 'hasura',
        headers: {
          // Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
  • Make a GraphQL query from your component
    <div v-if="$page.hasura.article.length">
        <div class="articles" v-for="article in $page.hasura.article" :key="">
          <p>{{ article.title }} by {{ }}</p>
    <div v-else>
        <p>No articles found</p>

query {
  hasura {
    article {
      author {


Checkout the contributing guide for more details.

You can’t perform that action at this time.