Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
static
.gitignore
README.md
gridsome.config.js
gridsome.server.js
package.json
yarn.lock

README.md

gridsome-postgres-graphql

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

Tutorial

  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to heroku

  • Get the Heroku app URL (say my-app.herokuapp.com)

  • Create author table:

    Open Hasura console: visit https://my-app.herokuapp.com 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
<template>
  <Layout>
    <h1>Articles</h1>
    <div v-if="$page.hasura.article.length">
        <div class="articles" v-for="article in $page.hasura.article" :key="article.id">
          <p>{{ article.title }} by {{ article.author.name }}</p>
        </div>
    </div>
    <div v-else>
        <p>No articles found</p>
    </div>
  </Layout>
</template>

<page-query>
query {
  hasura {
    article {
      id
      title
      author {
        name
      }
    }
  }
}
</page-query>

Contributing

Checkout the contributing guide for more details.

You can’t perform that action at this time.