feature(): demonstrating graphql modules with complete workflow, apol…

…lo and apollo hooks

.circleci/config.yml

@@ -0,0 +1,52 @@
+---
+defaults: &defaults
+  docker:
+    - image: circleci/node:10.16
+
+version: 2
+jobs:
+  build:
+    <<: *defaults
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - dependency-cache-{{ checksum "yarn.lock" }}
+            - dependency-cache-{{ checksum "packages/app/yarn.lock" }}
+            - dependency-cache-{{ checksum "packages/server/yarn.lock" }}
+      - run: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "./yarn.lock" }}
+          paths:
+            - node_modules
+            - packages/app/node_modules
+            - packages/server/node_modules
+      - run: yarn lint
+      - run: yarn test
+      # Workflow not working at the moment
+      # - persist_to_workspace:
+      #    root: ./
+      #    paths:
+      #      - ./node_modules
+      #      - ./packages/app
+      #      - ./paclages/server
+
+  test:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ./
+      - run: yarn test
+      - run: yarn lint
+
+workflows:
+  version: 2
+  build_and_release:
+    jobs:
+      - build
+      # - test:
+      #    requires:
+      #      - build

.circleci/heroku.sh

@@ -0,0 +1,25 @@
+#!/bin/sh -e
+
+usage() {
+  echo "OVERVIEW: Build apps according to BUILD_ENV value. Meant to be used for Heroku deployment"
+  exit
+}
+
+if [ "$1" = '-h' ] || [ "$1" = '--help' ]; then
+  usage
+fi
+
+(
+  PROJECT_ROOT="$(cd $(dirname $0)/..; pwd)"
+
+  cd $PROJECT_ROOT
+
+  if [ "$BUILD_ENV" = "app" ]; then
+    yarn workspace graphql-app build
+  elif [ "$BUILD_ENV" = "server" ]; then
+    yarn workspace graphql-server build
+  else
+    echo "Error: no build config for BUILD_ENV value '$BUILD_ENV'"
+    exit 1
+  fi
+)

.circleci/run-test.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+repo=$1
+branch=`git rev-parse --abbrev-ref HEAD`
+if [ "$branch" = "master" ]; then  
+  echo "On branch master. Let's run all tests!"  
+  eval "yarn test"
+elif git diff --name-only origin/master...$branch | grep "^${repo}" ; then  
+  echo "Changes detected! Adding ${repo} tests to the queue..."
+else  
+  echo "No changes detected. Exiting circle build..."  
+  circleci step halt
+fi

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+
+name: CI
+
+on: [push]
+
+jobs:
+  test:
+    name: Test on node ${{ matrix.node_version }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: [10, 12]
+
+    steps:
+    - uses: actions/checkout@master
+
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@master
+      with:
+        version: ${{ matrix.node_version }}
+
+    - name: Install
+      run: |
+        yarn
+  
+    - name: Build
+      run: |
+        yarn build
+    
+    - name: Test
+      run: |
+        yarn test

.gitignore

@@ -0,0 +1,23 @@
+# fs
+.DS_Store
+.vscode
+!.vscode/settings.json
+
+coverage
+node_modules
+.npm
+.nvmrc
+# we are using yarn, when people update with npm exclude this
+package-lock.json
+dist
+
+yarn-error.log
+.yarnclean
+
+.next
+.env
+
+*.scss.d.ts
+
+# auto generated (leave schema and hooks in repo!)
+# packages/app/src/graphql/_generated-types.ts

.graphqlconfig

@@ -0,0 +1,8 @@
+{
+  "schemaPath": "packages/server/src/_schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "dev": "http://localhost:4000/graphql"
+    }
+  }
+}

.huskyrc

@@ -0,0 +1,5 @@
+{
+    "hooks": {
+        "pre-commit": "lerna run --concurrency 1 --stream precommit"
+    }
+}

.npmrc

@@ -0,0 +1 @@
+save-exact = true

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "eslint.alwaysShowStatus": true,
+	"eslint.workingDirectories": [
+		"packages/app", "packages/server"
+	],
+    "prettier.tabWidth": 4
+}

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Maapteh.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,99 @@
+# GraphQL-Modules TypeScript Server & NextJS React application
+Demonstration application for showcase utilizing [Graphql-modules](https://graphql-modules.com/) which is using data from BOL.com Open Api for the server (also complete mocked version is available). You will find a sample with products and dataloader.
+The React web application is using [NextJS](https://nextjs.org/), [GraphQL Codegen by Dotan](https://graphql-code-generator.com) and [Apollo hooks](https://www.apollographql.com/docs/react/api/react-hooks/).
+
+## PRE-REQUISITES
+- Node dubnium
+- Facebook watchman (only for development) [optional]
+- Get your free API key from [bol.com/documentatie/open-api](https://partnerblog.bol.com/documentatie/open-api). Its also possible to run it in mocked mode, no keys needed.
+
+## INSTALL
+1. `yarn`
+2. `bash setup.sh` sets correct local .env file with mock mode as default
+
+## STRUCTURE
+```
+.
+├── /config/            # some configuration for build scripts
+├── /packages/          # 2 applications
+│   ├── /app/           # React NextJS isomorphic application
+│   └── /server/        # Apollo GraphQL server created with graphql-modules
+├── /test/              # end-to-end tests
+```
+
+## DEVELOPMENT
+**Now when you followed the install part you can simply run `yarn start`. It will spin up the GraphQL server and the React application.** Please look at the VSC plugins below for editor happiness.
+
+## PLAYGROUND
+At [local-server](http://localhost:400) or [demo-server heroku](https://graphql-server-schiphol.herokuapp.com/graphql) you will see [dataloader](./packages/server/src/modules/product/providers/product-data-loader.ts) taking care of eventually requesting two products from the API in one single call. Using the following query:
+
+```
+{
+  foo: getProduct(id:"9200000111963040") {
+    id
+    title
+  }
+  bar:getProduct(id:"9200000111963040") {
+    id
+    title
+    rating
+  }
+  shizzle:getProduct(id:"9200000108695538") {
+    title
+    rating
+    shortDescription
+  }
+}
+```
+
+## PRODUCTION
+By default after install the build will take place and the start command is running this build.
+
+## CONFIGURATION
+Environment vars for development (set them in CI for production).
+
+### '.env' file inside './packages/server':
+
+*Important: You can set MOCK_API to ON in case you don't have access to bol.com api. Then the server will use stub data*
+
+```
+BOL_API_KEY=***
+NODE_ENV=development
+MOCK_API=ON|OFF
+ENGINE_KEY=optional-apollo-engine-key-overhere REMOVE WHEN NOT AVAILABLE
+ALLOWED_ORIGIN=optional-not-needed-dev-mode REMOVE
+```
+
+### '.env' file inside './packages/app'
+This file is optional, the dev setting is the default.
+```
+GRAPHQL_ENDPOINT=endpoint-your-graphql-server-will-run
+```
+
+## TODO
+1) Add more tooling (things like storybook etc etc)
+2) Use https://github.com/kamilkisiela/graphql-inspector (also in pipeline, now locally only)
+3) `yarn upgrade-interactive --latest`
+
+## ARTICLES
+- [WhatsApp-Clone-server](https://github.com/Urigo/WhatsApp-Clone-server), [WhatsApp-Clone-Client-React](https://github.com/Urigo/WhatsApp-Clone-Client-React) and [tutorial](https://tortilla.academy/tutorial/whatsapp-react/step/1)
+- [Paypal Graphql](https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53)
+- [Airbnb luxery homes](https://medium.com/airbnb-engineering/how-airbnb-is-moving-10x-faster-at-scale-with-graphql-and-apollo-aa4ec92d69e2)
+- [https://www.graphqlweekly.com/](https://www.graphqlweekly.com/)
+- [GraphQL HQ](https://blog.apollographql.com/)
+
+
+## ONLINE DEMO
+*Both Heroku containers spin down when no activity, please be patient.*
+[graphql-schiphol.herokuapp.com/](https://graphql-schiphol.herokuapp.com) which points to the graphql endpoint at [graphql-server](https://graphql-server-schiphol.herokuapp.com/graphql). 
+
+
+## VSC
+- [vscode-apollo](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) for autocomplete in app
+- [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) including apollo linting
+
+
+
+[![Codeship Status for maapteh/graphql-modules-app](https://app.codeship.com/projects/3bf47d90-d61c-0136-0edf-1a5c0fb66462/status?branch=master)](https://graphql-schiphol.herokuapp.com)
+
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/maas38/graphql-workshop)

apollo.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    client: {
+        service: {
+          name: 'maapteh-6450',
+          localSchemaFile: './packages/server/src/_schema.graphql'
+        },
+        addTypename: false,
+        excludes: ['**/__tests__/**/*', '**/__mocks__/**/*'],
+        includes: ['./packages/app/src/**/*.graphql.ts']
+    },
+};

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // jest: https://github.com/facebook/jest/issues/7359
+  babelrcRoots: ['packages/*'],
+}

config/nginx/.gitignore

@@ -0,0 +1,3 @@
+local.test+2-key.pem
+local.test+2.pem
+local.*.pem

config/nginx/Dockerfile

@@ -0,0 +1,16 @@
+# THIS CONTAINER WILL ONLY BE USED DURING DEVELOPMENT
+FROM node:dubnium-slim
+
+ENV NODE_ENV=production
+ENV IS_DOCKER=true
+
+WORKDIR /usr/app
+
+COPY package.json /usr/app/package.json
+COPY yarn.lock /usr/app/yarn.lock
+
+RUN yarn install
+
+COPY . /usr/app
+
+CMD yarn start

config/nginx/README.md

@@ -0,0 +1,13 @@
+# Development nginx setup
+
+This repository comes with already generated certificates. You can use these or create your own self signed certificates. This nginx will not be used on production.
+
+## Create your self signed certificates
+The certificates are created using [mkcert](https://github.com/FiloSottile/mkcert)
+
+- `brew install mkcert` (on Guest network)
+- `mkcert -install`
+- Create them: `mkcert local.foo.test "*.foo.test" localhost` (in this folder)
+- Put certificate in keychain access (cli points where it put cert file)
+- *Make sure the name of the certificates are the same as in .gitignore (default names of mkcert). The proxy will take precedence when these files exist.*
+- *local.foo.test will only work if you add this to your local Host file.*

config/nginx/localhost.crt

@@ -0,0 +1,18 @@
+-----BEGIN CERTIFICATE-----
+MIIC5TCCAc2gAwIBAgIJAMPNzGLMR5RLMA0GCSqGSIb3DQEBCwUAMBQxEjAQBgNV
+BAMMCWxvY2FsaG9zdDAeFw0xODA3MDIxMDQxNDdaFw0yODA2MjkxMDQxNDdaMBQx
+EjAQBgNVBAMMCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAK7OYJJhvgznP3jcw3b7BsYHFTW7CXlA2b2ra7mrjX8ns/fpT7VQCdT/8vOX
+vf8auPtCNakw70qJBm/3fwd3i/buDCxpxjjzlDF5kKrpdw1f1PdNQsGl5c6BDFOi
+qQEn0FwEdY6zERXIpUPXLHobdhf2zRiZU93fl/5h/uYVYDPV/2RBz6Y/PfW/8Aug
+yXA0S67+7TalNMK/k0CCPv5UR+5LLZlnfKZJhG5hWQjar8CItpheQlaEl7s8kiMN
+GZFCsW+zbz6jgcP8YwznhdBzDifGH1Wrl5JOZdH6vHZv08s3Oy+3qvd5598r4INP
+XXAFiQvxEbMjgV5rL3bH9D9nMNUCAwEAAaM6MDgwFAYDVR0RBA0wC4IJbG9jYWxo
+b3N0MAsGA1UdDwQEAwIHgDATBgNVHSUEDDAKBggrBgEFBQcDATANBgkqhkiG9w0B
+AQsFAAOCAQEATevbPis+ObkJfqW3eKIK8r2UhtC4G+TaTx3Vh5QwR/3EdwSeUyzF
+pfDMcLhRuHVqBzzbT5xhHCyt7g8bQSfNsZTLxEQcb88kYARj7WZ579xX+nP0dxAS
+hrBo3jiOvZKS9yz7T4BjuAmegLVPUPHFFG3ZNlLfZQKR9D3RQ/2WecFMZQznUEvl
+U7IJ/F+pvuR8LUhmL70RFGvX01L5bl3oFUDdYaCe5M35zVt/vMF73arbcR45dhcD
+jQ7bl/ro9+C/gSGJNa+FAumzrZmOJYR5ENqJBr2F+R+mRjpYg6g4SPmGjT+7LAID
+nkyGwcD7I1QpXVc8tVRiSkKQpLFNyhVriw==
+-----END CERTIFICATE-----