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.
assets refactor community content and folder structure (#1353) Jan 17, 2019
migrations refactor community content and folder structure (#1353) Jan 17, 2019
src refactor community content and folder structure (#1353) Jan 17, 2019
.gitignore refactor community content and folder structure (#1353) Jan 17, 2019
README.md refactor community content and folder structure (#1353) Jan 17, 2019
config.yaml
gatsby-config.js refactor community content and folder structure (#1353) Jan 17, 2019
package.json refactor community content and folder structure (#1353) Jan 17, 2019
yarn.lock refactor community content and folder structure (#1353) Jan 17, 2019

README.md

gatsby-postgres-graphql

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

Gatsby Postgres GraphQL

Tutorial

  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to 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/sample-apps/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:

    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

  • 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 plugin
      options: {
        typeName: 'HASURA',
        fieldName: 'hasura', // <- fieldName under which schema will be stitched
        createLink: () =>
          createHttpLink({
            uri: `${ process.env.HASURA_GRAPHQL_URL }`, // <- Configure connection GraphQL url
            headers: {},
            fetch,
          }),
        refetchInterval: 10, // Refresh every 10 seconds for new data
      },
    },
  ]
}
  • Make a GraphQL query from your component
const Index = ({ data }) => (
  <div>
    <h1>My Authors </h1>
    <AuthorList authors={data.hasura.author} />
  </div>
)
export const query = 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

    Demo app

Contributing

Checkout the contributing guide for more details.