community: learn: add reason-react with apollo (#2523)

community/learn/graphql-tutorials/manifests/caddy-config.yaml

@@ -33,9 +33,16 @@ data:
         /graphql/elm/elm-boilerplate.zip https://graphql-engine-cdn.hasura.io/learn-hasura/boilerplates/elm/elm-boilerplate.zip
       }
 
+      redir 301 {
+        /graphql/reason-react-apollo/boilerplate.zip https://graphql-engine-cdn.hasura.io/learn-hasura/boilerplates/reason-react-apollo/boilerplate.zip
+      }
+
+      redir 301 {
+        /graphql/reason-react-apollo/ /graphql/reason-react-apollo/introduction
+      }
 
       redir 301 {
-        /graphql/elm/ /graphql/elm-graphql/introduction
+        /graphql/elm-graphql/ /graphql/elm-graphql/introduction
       }
 
       redir 301 {
@@ -57,7 +64,7 @@ data:
       redir 301 {
         /graphql/android/ /graphql/android/introduction
       }
-      
+
       redir 301 {
         /graphql/hasura/ /graphql/hasura/introduction
       }
@@ -111,7 +118,9 @@ data:
       proxy /graphql/android android-apollo
 
       proxy /graphql/elm-graphql elm-graphql
-      
+
+      proxy /graphql/reason-react-apollo reason-react-apollo
+
       proxy /graphql hasura/v1/graphql {
         without /graphql
         websocket

community/learn/graphql-tutorials/manifests/reason-react-apollo.yaml

@@ -0,0 +1,50 @@
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: reason-react-apollo
+  name: reason-react-apollo
+  namespace: default
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: reason-react-apollo
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxUnavailable: 0
+      maxSurge: 100%
+  template:
+    metadata:
+      labels:
+        app: reason-react-apollo
+    spec:
+      containers:
+      - image: hasura/base-git-image:0.7
+        imagePullPolicy: IfNotPresent
+        name: reason-react-apollo
+        ports:
+        - containerPort: 8080
+          protocol: TCP
+        readinessProbe:
+          httpGet:
+            path: /graphql/reason-react-apollo/introduction
+            port: 8080
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: reason-react-apollo
+  name: reason-react-apollo
+  namespace: default
+spec:
+  ports:
+  - port: 80
+    protocol: TCP
+    targetPort: 8080
+  selector:
+    app: reason-react-apollo
+  type: ClusterIP

community/learn/graphql-tutorials/remote-hasura.yaml.sample

@@ -59,6 +59,16 @@ spec:
       name: android-apollo
       path: ./community/learn/graphql-tutorials/tutorials/android-apollo/tutorial-site
     name: android-apollo
+  - containers:
+    - dockerfile: ./community/learn/graphql-tutorials/tutorials/elm-graphql/tutorial-site/Dockerfile
+      name: elm-graphql
+      path: ./community/learn/graphql-tutorials/tutorials/elm-graphql/tutorial-site
+    name: elm-graphql
+  - containers:
+    - dockerfile: ./community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site/Dockerfile
+      name: reason-react-apollo
+      path: ./community/learn/graphql-tutorials/tutorials/reason-react-apollo/tutorial-site
+    name: reason-react-apollo
   manifests:
     helm: {}
     path: ./community/learn/graphql-tutorials/manifests

community/learn/graphql-tutorials/tutorials/react-native-apollo/tutorial-site/content/update-delete-mutations.md

@@ -1,7 +1,7 @@
 ---
 title: "Update mutations and automatic cache updates"
-metaTitle: "Optimistic UI updates after mutations | GraphQL React Native Apollo Tutorial"
-metaDescription: "We will use the Apollo Client Optimistic Response to perform UI updates after a GraphQL mutation in the React Native app"
+metaTitle: "Automatic cache updates after mutations | GraphQL React Native Apollo Tutorial"
+metaDescription: "We will use the Apollo Client's automatic cache update to perform UI updates after a GraphQL mutation in the React Native app"
 ---
 
 In this section, we will learn the following concepts:

community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+.merlin
+.bsb.lock
+npm-debug.log
+/lib/bs/
+/node_modules/
+build
+build/index.html
+build/Index.js
+*.bs.js

community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/README.md

@@ -0,0 +1,36 @@
+# todo-graphql
+
+## Run Project
+
+```sh
+npm install
+npm start
+# in another tab
+npm run webpack
+```
+
+After you see the webpack compilation succeed (the `npm run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
+
+**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
+
+## Run Project with Server
+
+To run with the webpack development server run `npm run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
+
+Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
+
+To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`).
+
+## Build for Production
+
+```sh
+npm run clean
+npm run build
+npm run webpack:production
+```
+
+This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
+
+If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
+
+**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.

community/learn/graphql-tutorials/tutorials/reason-react-apollo/app-boilerplate/bsconfig.json

@@ -0,0 +1,23 @@
+
+{
+  "name": "react-hooks-template",
+  "reason": {
+    "react-jsx": 3
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react",
+    "bs-react-bootstrap",
+    "@glennsl/bs-json"
+  ],
+  "refmt": 3
+}