Branch: master
Find file History


Boilerplate to get started with Nextjs, Hasura GraphQL engine as CMS and postgres as database using this awesome library: withData.

Nextjs Postgres GraphQL


  • 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

  • Clone this repo:

    git clone
    cd graphql-engine/community/sample-apps/nextjs-postgres-graphql
  • Install npm modules:

    npm install
  • Create config.js as follows, in this step we are configuring withData with an httpLink to connect to a valid GraphQL server URL.

    import { withData } from 'next-apollo'
    import { HttpLink } from 'apollo-link-http'
    // can also be a function that accepts a `context` object (SSR only) and returns a config
    const config = {
      link: new HttpLink({
        uri: '', // <- Configure GraphQL Server URL (must be absolute)
    export default withData(config)
  • Wrap your page component with Query component from react-apollo so that appropriate data can be fetched while the page is SSRed

    • GraphQL query

      const query = gql`
      	query {
      	  author {
    • Wrap your component with Query

        <Query    // <- Wrap the component which requires data with Query component from react-apollo
          query={ query }
          fetchPolicy={ 'cache-and-network' }
          {({ loading, data: { author:authors }}) => {
            return (
                <AuthorList authors={authors} />
  • Run the app:

    npm run dev -- -p 8000
  • Test the app Visit http://localhost:8000 to view the app

    Demo app

How it works

It uses next-apollo underneath which ensures that data requirement is satisfied before it is rendered on the server and next.js takes care of the rest.


Checkout the contributing guide for more details.