community: add gridsome sample app (#2363)

community/sample-apps/gridsome-postgres-graphql/.gitignore

@@ -0,0 +1,8 @@
+*.log
+.cache
+.DS_Store
+src/.temp
+node_modules
+dist
+.env
+.env.*

community/sample-apps/gridsome-postgres-graphql/README.md

@@ -0,0 +1,111 @@
+# gridsome-postgres-graphql
+
+Boilerplate to get started with Gridsome, Hasura GraphQL engine as CMS and postgres as database using the awesome plugin [source-graphql](https://github.com/gridsome/gridsome/tree/master/packages/source-graphql).
+
+![Gridsome Postgres GraphQL](https://graphql-engine-cdn.hasura.io/assets/gridsome-postgres-graphql/gridsome-postgres-graphql.png)
+
+# Tutorial
+
+- Deploy Postgres and GraphQL Engine on Heroku:
+  
+  [![Deploy to
+  heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/hasura/graphql-engine-heroku)
+
+- Get the Heroku app URL (say `my-app.herokuapp.com`)
+
+- 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](../gatsby-postgres-graphql/assets/add_table.jpg)
+
+- Insert sample data into `author` table:
+
+  ![Insert data into author table](../gatsby-postgres-graphql/assets/insert_data.jpg)
+
+  Verify if the row is inserted successfully
+
+  ![Insert data into author table](../gatsby-postgres-graphql/assets/browse_rows.jpg)
+
+- 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](../react-static-graphql/assets/author_fk.png)
+
+- Now create a relationship from article table to author table by going to the Relationships tab.
+
+- Install Gridsome CLI tool if you don't have
+
+`npm install --global @gridsome/cli`
+
+- Install node modules:
+  ```bash
+  yarn install
+  ```
+
+- Configure Gridsome to use `source-graphql` plugin and a connection GraphQL url to stitch the schema. Open the file `gridsome.config.js` and modify the plugin section to configure the GraphQL Endpoint.
+
+```js
+{
+  plugins: [
+    {
+      use: '@gridsome/source-graphql',
+      options: {
+        url: 'http://localhost:8080/v1/graphql',
+        fieldName: 'hasura',
+        headers: {
+          // Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
+        },
+      },
+    }
+  ]
+}
+```
+
+- Make a GraphQL query from your component
+
+```js
+<template>
+  <Layout>
+    <h1>Articles</h1>
+    <div v-if="$page.hasura.article.length">
+        <div class="articles" v-for="article in $page.hasura.article" :key="article.id">
+          <p>{{ article.title }} by {{ article.author.name }}</p>
+        </div>
+    </div>
+    <div v-else>
+        <p>No articles found</p>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+query {
+  hasura {
+    article {
+      id
+      title
+      author {
+        name
+      }
+    }
+  }
+}
+</page-query>
+```
+
+- Run the app:
+  ```bash
+  yarn start
+  ```
+- Test the app
+  Visit [http://localhost:8080](http://localhost:8080) to view the app
+
+  ![Demo app](https://graphql-engine-cdn.hasura.io/assets/gridsome-postgres-graphql/gridsome-homepage.png)
+
+# Contributing
+
+Checkout the [contributing guide](../../../CONTRIBUTING.md#community-content) for more details.
+

community/sample-apps/gridsome-postgres-graphql/gridsome.config.js

@@ -0,0 +1,19 @@
+// This is where project configuration and plugin options are located. 
+// Learn more: https://gridsome.org/docs/config
+
+// Changes here require a server restart.
+// To restart press CTRL + C in terminal and run `gridsome develop`
+
+module.exports = {
+  siteName: 'Gridsome',
+  plugins: [{
+      use: '@gridsome/source-graphql',
+      options: {
+        url: 'http://localhost:8090/v1/graphql',
+        fieldName: 'hasura',
+        headers: {
+          // Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
+        },
+      },
+    }]
+}

community/sample-apps/gridsome-postgres-graphql/gridsome.server.js

@@ -0,0 +1,16 @@
+// Server API makes it possible to hook into various parts of Gridsome
+// on server-side and add custom data to the GraphQL data layer.
+// Learn more: https://gridsome.org/docs/server-api
+
+// Changes here require a server restart.
+// To restart press CTRL + C in terminal and run `gridsome develop`
+
+module.exports = function (api) {
+  api.loadSource(({ addContentType }) => {
+    // Use the Data Store API here: https://gridsome.org/docs/data-store-api
+  })
+
+  api.createPages(({ createPage }) => {
+    // Use the Pages API here: https://gridsome.org/docs/pages-api
+  })
+}

community/sample-apps/gridsome-postgres-graphql/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "my-gridsome-site",
+  "private": true,
+  "scripts": {
+    "start": "gridsome develop",
+    "build": "gridsome build",
+    "develop": "gridsome develop",
+    "explore": "gridsome explore"
+  },
+  "dependencies": {
+    "@gridsome/source-graphql": "^0.1.0",
+    "gridsome": "^0.6.0"
+  }
+}

community/sample-apps/gridsome-postgres-graphql/src/components/README.md

@@ -0,0 +1,4 @@
+Add components that will be imported to Pages and Layouts to this folder.
+Learn more about components here: https://gridsome.org/docs/components
+
+You can delete this file.

community/sample-apps/gridsome-postgres-graphql/src/layouts/Default.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="layout">
+    <header class="header">
+      <strong>
+        <g-link to="/">{{ $static.metaData.siteName }}</g-link>
+      </strong>
+      <nav class="nav">
+        <g-link class="nav__link" to="/">Home</g-link>
+        <g-link class="nav__link" to="/articles">Articles</g-link>
+      </nav>
+    </header>
+    <slot/>
+  </div>
+</template>
+
+<static-query>
+query {
+  metaData {
+    siteName
+  }
+}
+</static-query>
+
+<style>
+body {
+  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  margin:0;
+  padding:0;
+  line-height: 1.5;
+}
+
+.layout {
+  max-width: 760px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  height: 80px;
+}
+
+.nav__link {
+  margin-left: 20px;
+}
+</style>

community/sample-apps/gridsome-postgres-graphql/src/layouts/README.md

@@ -0,0 +1,5 @@
+Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
+
+Learn more about Layouts: https://gridsome.org/docs/layouts
+
+You can delete this file.

community/sample-apps/gridsome-postgres-graphql/src/main.js

@@ -0,0 +1,9 @@
+// This is the main.js file. Import global CSS and scripts here.
+// The Client API can be used here. Learn more: gridsome.org/docs/client-api
+
+import DefaultLayout from '~/layouts/Default.vue'
+
+export default function (Vue, { router, head, isClient }) {
+  // Set default layout as a global component
+  Vue.component('Layout', DefaultLayout)
+}

community/sample-apps/gridsome-postgres-graphql/src/pages/Articles.vue

@@ -0,0 +1,35 @@
+<template>
+  <Layout>
+    <h1>Articles</h1>
+    <div v-if="$page.hasura.article.length">
+	    <div class="articles" v-for="article in $page.hasura.article" :key="article.id">
+	      <p>{{ article.title }} by {{ article.author.name }}</p>
+	    </div>
+    </div>
+    <div v-else>
+    	<p>No articles found</p>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+query {
+  hasura {
+    article {
+      id
+      title
+      author {
+      	name
+  	  }
+    }
+  }
+}
+</page-query>
+
+<script>
+export default {
+  metaInfo: {
+    title: 'Articles'
+  }
+}
+</script>

community/sample-apps/gridsome-postgres-graphql/src/pages/Index.vue

@@ -0,0 +1,41 @@
+<template>
+  <Layout>
+    
+    <h1>Authors</h1>
+
+    <div v-if="$page.hasura.author.length">
+      <div class="author" v-for="author in $page.hasura.author" :key="author.id">
+        <p>{{ author.name }}</p>
+      </div>
+    </div>
+    <div v-else>
+      <p>No authors found. Add one using Hasura Console</p>
+    </div>
+
+  </Layout>
+</template>
+
+<page-query>
+query {
+  hasura {
+    author {
+      id
+      name
+    }
+  }
+}
+</page-query>
+
+<script>
+export default {
+  metaInfo: {
+    title: 'Authors'
+  }
+}
+</script>
+
+<style>
+.home-links a {
+  margin-right: 1rem;
+}
+</style>

community/sample-apps/gridsome-postgres-graphql/src/pages/README.md

@@ -0,0 +1,5 @@
+Pages are usually used for normal pages or for listing items from a GraphQL collection.
+Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
+Learn more about pages: https://gridsome.org/docs/pages
+
+You can delete this file.

community/sample-apps/gridsome-postgres-graphql/src/templates/README.md

@@ -0,0 +1,7 @@
+Templates for **GraphQL collections** should be added here.
+To create a template for a collection called `WordPressPost`
+create a file named `WordPressPost.vue` in this folder.
+
+Learn more: https://gridsome.org/docs/templates
+
+You can delete this file.

community/sample-apps/gridsome-postgres-graphql/static/README.md

@@ -0,0 +1,3 @@
+Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
+
+This file should be deleted.