learn: add vue graphql tutorials (#2091)

hasura · May 10, 2019 · a63009c · a63009c
1 parent 4253817
commit a63009c
Show file tree

Hide file tree

Showing 110 changed files with 29,819 additions and 0 deletions.
diff --git a/community/learn/graphql-tutorials/manifests/caddy-config.yaml b/community/learn/graphql-tutorials/manifests/caddy-config.yaml
@@ -10,10 +10,18 @@ data:
         /graphql/react/boilerplate.zip https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/react-boilerplate/boilerplate.zip
       }
 
+      redir 301 {
+        /graphql/vue/boilerplate.zip https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/vue-boilerplate/boilerplate.zip
+      }
+
       redir 301 {
         /graphql/react/ /graphql/react/introduction
       }
 
+      redir 301 {
+        /graphql/vue/ /graphql/vue/introduction
+      }
+      
       redir 301 {
         /graphql/hasura/ /graphql/hasura/introduction
       }
@@ -50,6 +58,8 @@ data:
 
       proxy /graphql/react react-apollo
 
+      proxy /graphql/vue vue-apollo
+      
       proxy /graphql hasura/v1alpha1/graphql {
         without /graphql
         websocket

diff --git a/community/learn/graphql-tutorials/manifests/graphiql.yaml b/community/learn/graphql-tutorials/manifests/graphiql.yaml
@@ -15,6 +15,7 @@ spec:
     type: RollingUpdate
     rollingUpdate:
       maxUnavailable: 0
+      maxSurge: 100%
   template:
     metadata:
       labels:

diff --git a/community/learn/graphql-tutorials/manifests/homepage.yaml b/community/learn/graphql-tutorials/manifests/homepage.yaml
@@ -15,6 +15,7 @@ spec:
     type: RollingUpdate
     rollingUpdate:
       maxUnavailable: 0
+      maxSurge: 100%
   template:
     metadata:
       labels:

diff --git a/community/learn/graphql-tutorials/manifests/react-apollo.yaml b/community/learn/graphql-tutorials/manifests/react-apollo.yaml
@@ -15,6 +15,7 @@ spec:
     type: RollingUpdate
     rollingUpdate:
       maxUnavailable: 0
+      maxSurge: 100%
   template:
     metadata:
       labels:

diff --git a/community/learn/graphql-tutorials/manifests/vue-apollo.yaml b/community/learn/graphql-tutorials/manifests/vue-apollo.yaml
@@ -0,0 +1,46 @@
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: vue-apollo
+  name: vue-apollo
+  namespace: default
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: vue-apollo
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxUnavailable: 0
+      maxSurge: 100%
+  template:
+    metadata:
+      labels:
+        app: vue-apollo
+    spec:
+      containers:
+      - image: hasura/base-git-image:0.7
+        imagePullPolicy: IfNotPresent
+        name: vue-apollo
+        ports:
+        - containerPort: 8080
+          protocol: TCP
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: vue-apollo
+  name: vue-apollo
+  namespace: default
+spec:
+  ports:
+  - port: 80
+    protocol: TCP
+    targetPort: 8080
+  selector:
+    app: vue-apollo
+  type: ClusterIP
diff --git a/community/learn/graphql-tutorials/tutorials/react-apollo/tutorial-site/src/html.js b/community/learn/graphql-tutorials/tutorials/react-apollo/tutorial-site/src/html.js
@@ -0,0 +1,67 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class HTML extends React.Component {
+  render() {
+    return (
+      <html {...this.props.htmlAttributes}>
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          />
+          <meta name="title" content="A GraphQL course for React developers | Hasura" />
+          <meta name="description" content="A concise and powerful tutorial that covers fundamental concepts of both GraphQL and using GraphQL in React" />
+          <meta property="og:title" content="A GraphQL course for React developers | Hasura" />
+          <meta property="og:description" content="A concise and powerful tutorial that covers fundamental concepts of both GraphQL and using GraphQL in React" />
+          <meta property="og:image" content="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/twitter-card-react.png" />
+          <meta property="twitter:card" content="summary_large_image" />
+          <meta property="twitter:title" content="A GraphQL course for React developers | Hasura" />
+          <meta property="twitter:description" content="A concise and powerful tutorial that covers fundamental concepts of both GraphQL and using GraphQL in React" />
+          <meta property="twitter:image" content="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/twitter-card-react.png" />
+          <link rel="stylesheet"
+          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossOrigin="anonymous" />
+          <script
+  			  src="https://code.jquery.com/jquery-3.3.1.min.js"
+  			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+  			  crossOrigin="anonymous"></script>
+          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossOrigin="anonymous"></script>
+          {this.props.headComponents}
+        </head>
+        <body {...this.props.bodyAttributes}>
+          {this.props.preBodyComponents}
+          <div
+            key={`body`}
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+          <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            $(document).on('click','.navbar-collapse.in',function(e) {
+              if( $(e.target).is('a') ) {
+                $(this).collapse('hide');
+              }
+            });
+            `
+          }}
+          />
+          </body>
+
+      </html>
+    )
+  }
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/.dockerignore b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/.gitignore b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/Dockerfile b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/Dockerfile
@@ -0,0 +1,20 @@
+FROM node:carbon
+
+# Create app directory
+WORKDIR /app
+
+# Install app dependencies
+RUN npm -g install serve
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+COPY package*.json ./
+
+RUN npm install
+
+# Bundle app source
+COPY . /app
+#Build react/vue/angular bundle static files
+RUN npm run build
+
+EXPOSE 8080
+# serve dist folder on port 8080
+CMD ["serve", "-s", "dist", "-p", "8080"]
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/README.md b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/README.md
@@ -0,0 +1,18 @@
+Tutorial
+--------
+
+- [Vue](https://learn.hasura.io/graphql/vue/introduction)
+- [Hasura GraphQL Endpoint](https://learn.hasura.io/graphql)
+
+Tech stack
+----------
+
+- Frontend
+    - Vue 2.6+
+    - Vue Apollo
+
+Run the Vue app
+---------------
+
+Run `npm run serve` to start the todo app.
+
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/auth_config.json b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/auth_config.json
@@ -0,0 +1,4 @@
+{
+  "domain": "graphql-tutorials.auth0.com",
+  "clientId": "P38qnFo1lFAQJrzkun--wEzqljVNGcWW"
+}
diff --git a/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/babel.config.js b/community/learn/graphql-tutorials/tutorials/vue-apollo/app-boilerplate/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/app"]
+};