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

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.