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


A sample app to get started with react-static site generator, Hasura GraphQL engine and Postgres as database.


  • Deploy Postgres and GraphQL Engine on Heroku:

    Deploy to heroku

    Please checkout our docs for other deployment methods

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

  • Clone this repo:

    git clone
    cd graphql-engine/community/sample-apps/react-static-graphql
  • Install npm modules:

    yarn install
  • Open src/apollo.js and configure Hasura's GraphQL Endpoint as follows:

      import { ApolloClient } from 'apollo-client'
      import { HttpLink } from 'apollo-link-http'
      import { InMemoryCache } from 'apollo-cache-inmemory'
      import fetch from 'node-fetch'
      const client = new ApolloClient({
        link: new HttpLink({
          uri: '',
        cache: new InMemoryCache(),
      export default client

Replace the uri argument with your Hasura GraphQL Endpoint.

  • We have defined the graphql query in src/graphql/queries/queries.js.

    • GraphQL query to fetch author information
    query {
      author {
    • GraphQL query to fetch articles written by author
    query($author: Int!) {
        article(where: {author_id: {_eq: $author}}) {
  • In pages/blog.js, we do the templating for listing all the authors and in containers/Post.js, we do the templating for listing all the articles written by a selected author.

  • Run the app:

    yarn start
  • Test the app Visit http://localhost:3000 to view the app

  • Bundle app

    yarn stage
  • Serve Production app

    yarn serve

For detailed explanation on how things work, checkout react-static docs.

You can’t perform that action at this time.