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

• Deploy Postgres and GraphQL Engine on Heroku:

  

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

• Clone this repo:

  git clone https://github.com/hasura/graphql-engine cd graphql-engine/community/boilerplates/gatsby-postgres-graphql

• 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:

  

• Insert sample data into author table:

  

  Verify if the row is inserted successfully

  

• Install npm modules:

  npm install

• Configure gatsby to use gatsby-source-graphql plugin and a connection GraphQL url to stitch the schema.

{plugins: [{resolve: 'gatsby-source-graphql',// <- Configure pluginoptions: {typeName: 'HASURA',fieldName: 'hasura',// <- fieldName under which schema will be stitchedcreateLink: ()=>createHttpLink({uri: `${process.env.HASURA_GRAPHQL_URL}`,// <- Configure connection GraphQL urlheaders: {}, fetch,}),refetchInterval: 10,// Refresh every 10 seconds for new data},},]}

• Make a GraphQL query from your component

constIndex=({ data })=>(<div><h1>My Authors </h1><AuthorListauthors={data.hasura.author}/></div>)exportconstquery=graphql` query AuthorQuery{ hasura{# <- fieldName as configured in the gatsby-config author{# Normal GraphQL query id name } } }`

• Run the app:

  HASURA_GRAPHQL_URL=https://my-app.herokuapp.com/v1alpha1/graphql npm run develop

• Test the app Visit http://localhost:8000 to view the app

  

• Setup a git repo based continuous build on netlify
• Create a build-hook
• Head to the events tab on the hasura console
• Create a new trigger. Select the table you want to listen to changes on and the operations.
• Set the URL to be the netlify build-trigger URL

Checkout the contributing guide for more details.