graphql-engine/community/sample-apps/nuxtjs-postgres-graphql
Sai Krishna Prasad Kandula d7a52b9342 readme: use cloud signup endpoint for "Deploy to Hasura" CTA
https://github.com/hasura/graphql-engine-mono/pull/2142

GitOrigin-RevId: 212d766978841d5609d726f8359586185f3cbb59
2021-08-19 07:03:05 +00:00
..
apollo introduce v1/graphql (fix #1368) (#2064) 2019-05-10 11:35:10 +05:30
assets add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
components add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
layouts add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
middleware add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
pages add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
plugins update nuxtjs-postgres-graphql dependencies (close #3743) (#3765) 2020-01-24 10:32:55 +05:30
static add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
store add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
.gitignore add nuxtjs-postgres-graphql (#1439) 2019-01-23 16:49:32 +05:30
nuxt.config.js update nuxtjs-postgres-graphql dependencies (close #3743) (#3765) 2020-01-24 10:32:55 +05:30
package-lock.json update nuxtjs-postgres-graphql dependencies (close #3743) (#3765) 2020-01-24 10:32:55 +05:30
package.json update nuxtjs-postgres-graphql dependencies (close #3743) (#3765) 2020-01-24 10:32:55 +05:30
README.md readme: use cloud signup endpoint for "Deploy to Hasura" CTA 2021-08-19 07:03:05 +00:00

nuxtjs-postgres-graphql

Boilerplate to get started with Nuxt.js, Hasura GraphQL engine as CMS and postgres as database using the create-nuxt-app and @nuxtjs/apollo module.

Edit nuxtjs-postgres-graphql

Tutorial

  • Deploy GraphQL Engine on Hasura Cloud and setup PostgreSQL via Heroku:

    Deploy to Hasura Cloud

  • Get the Hasura app URL (say nuxtjs-graphql.hasura.app)

  • Create author table:

    Open Hasura console: visit https://nuxtjs-graphql.hasura.app 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)

  • Clone this repo:

    git clone https://github.com/hasura/graphql-engine
    cd graphql-engine/community/sample-apps/nuxtjs-postgres-graphql
    
  • Install npm modules:

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

    
      import { InMemoryCache } from "apollo-cache-inmemory";
      export default function(context){
        return {
              httpLinkOptions: {
                  uri: 'https://nextjs-graphql.hasura.app/v1/graphql',
                  credentials: 'same-origin'
              },
              cache: new InMemoryCache(),
              wsEndpoint: 'ws://nextjs-graphql.hasura.app/v1/graphql',
        }
      }
    
  • We have defined the graphql query in apollo/queries/fetchAuthor.gql.

    • GraphQL query
    
    query {
      author {
        id
        name
      }
    }
    
    
    • In pages/index.vue, we import author query.
    
    <script>
    import author from '~/apollo/queries/fetchAuthor'
    
    export default {
      apollo: {
        author: {
          prefetch: true,
          query: author
        }
      },
      head: {
        title: 'Authors of Blog'
      }
    }
    </script>
    
    
  • Run the app:

    npm run dev
    
  • Test the app Visit http://localhost:3000 to view the app

For detailed explanation on how things work, checkout Nuxt.js docs.