Update 202304 (#123)

* Bump nx

* Bump gql codegen-related packages

* Fix graph-backend

* Update dev-tools

* Use PayloadError

* Update README

* Cleanup

* Bump prisma

* Pin cypress and node

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+*.generated.*

.github/workflows/ci.yml

@@ -5,17 +5,17 @@ on:
       - 'master'
 
 env:
-  node-version: '16.14'
+  node-version: '18.x'
 
 jobs:
   precheck:
     name: Check jobs to run
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     outputs:
       affected-main: ${{ steps.affected.outputs.main }}
     steps:
       - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.10.0
+        uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
 
@@ -37,11 +37,12 @@ jobs:
       - name: Check affected apps
         id: affected
         run: |
-          echo "::set-output name=main::$(./ops/bin/check-affected.sh apps main origin/master)"
+          main_affected=`./ops/bin/check-affected.sh apps main origin/master`
+          echo "::set-output name=main::$main_affected"
 
   main:
     name: Main app CI
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     needs: precheck
     if: ${{ needs.precheck.outputs.affected-main == 'true' }}
     steps:

.nvmrc

@@ -0,0 +1 @@
+18

README.md

@@ -11,44 +11,34 @@ Note: This setup is for Mac, you will have to do the equivalent if you use Linux
 - [Nx](https://nx.dev/)
 - [Docker](https://www.docker.com/)
 
-### 🌟 Setting up CLI (Recommended)
+### ⚡️ Get Started!
 
-To start on MacOS, setting up the CLI command to make development easier. Go to the root of the project and run the init script.
-
-For convenience, this will install packages, set up SSL, etc.
-
-```
-$ ./dev-tools/bin/init.sh
-```
-
-### ⚡️ Start the Apps!
+#### Set Up Networking
 
 Set up DNS resolver to point related traffic to your host machine using the following command:
 
-```
-$ bam vm-up
+```bash
+$ nx nw-cert dev # Set up TLS certificate
+$ nx nw-up dev   # Set up DNS resolver
 ```
 
-Create a base dev image to be shared in the apps. We do this to avoid installing packages multiple times.
+#### Start the app
 
+```bash
+$ nx serve main
+$ nx up dev
 ```
-$ bam build-dev-images
-```
+
+#### Generate dummy data
 
 ```
-$ bam up
+$ nx init-database main-prisma
 ```
 
 Once the containers have been successfully built, go to the following URLs from your favourite browser:
 
 - `https://bam.dev`: Main app
 - `https://bam.dev/api/graphql`: GraphQL endpoint
 
-#### Generate dummy data
-
-```
-$ nx init-database main-prisma
-```
-
 Made with ♥ by Eddy Nguyen
 https://eddeee888.me

apps/main-e2e/Dockerfile.e2e

@@ -1,4 +1,4 @@
-FROM node:16.14-alpine
+FROM node:18.14-alpine
 
 WORKDIR /usr/src/app
 

apps/main-e2e/docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.7'
 
 services:
   cypress:
-    image: cypress/included:10.7.0
+    image: cypress/included:12.9.0
     working_dir: /e2e
     volumes:
       - ../..:/e2e

apps/main-e2e/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "main-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/main-e2e/src",
   "projectType": "application",
@@ -20,7 +21,7 @@
       }
     },
     "setup": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "prod",
       "configurations": {
         "dev": {
@@ -35,13 +36,13 @@
       }
     },
     "teardown": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "command": "apps/main-e2e/bin/teardown.sh"
       }
     },
     "run": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "host",
       "configurations": {
         "host": {

apps/main/.env.local

@@ -1,2 +1,2 @@
-PRISMA_DATABASE_URL=mysql://root:root@main-db:3306/main?schema=public
+PRISMA_DATABASE_URL=mysql://root:root@localhost:3306/main?schema=public
 PRISMA_BINARY_TARGET=["native","linux-musl"]

apps/main/frontend/pageComponents/home/Home.generated.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import * as Types from '@bam/graph-frontend/generated-types';
 
 import { DocumentNode } from 'graphql';
@@ -9,7 +8,7 @@ export type HomeQueryVariables = Types.Exact<{ [key: string]: never }>;
 export type HomeQuery = {
   __typename: 'Query';
   users:
-    | { __typename: 'UsersError'; error: Types.ErrorType }
+    | { __typename: 'PayloadError'; error: Types.ErrorType }
     | { __typename: 'UsersResult'; result: Array<{ __typename: 'User'; id: string; displayName: string }> };
 };
 
@@ -51,7 +50,7 @@ export const HomeDocument = {
                 },
                 {
                   kind: 'InlineFragment',
-                  typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'UsersError' } },
+                  typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'PayloadError' } },
                   selectionSet: {
                     kind: 'SelectionSet',
                     selections: [{ kind: 'Field', name: { kind: 'Name', value: 'error' } }],

apps/main/frontend/pageComponents/home/Home.graphql

@@ -6,7 +6,7 @@ query Home {
         displayName
       }
     }
-    ... on UsersError {
+    ... on PayloadError {
       error
     }
   }

apps/main/frontend/pageComponents/home/Home.spec.tsx

@@ -63,7 +63,7 @@ describe('Homepage', () => {
     expect(await screen.findByText('2 - User Two')).toBeInTheDocument();
   });
 
-  it('should render UsersError correctly', async () => {
+  it('should render PayloadError correctly', async () => {
     render(
       <MockedProvider
         mocks={[
@@ -74,7 +74,7 @@ describe('Homepage', () => {
             result: {
               data: {
                 users: {
-                  __typename: 'UsersError',
+                  __typename: 'PayloadError',
                   error: ErrorCodes.FORBIDDEN_ERROR,
                 },
               },

apps/main/frontend/pageComponents/home/Home.tsx

@@ -13,7 +13,7 @@ export const Home: FunctionComponent = () => {
     return <div>Error!</div>;
   }
 
-  if (data.users.__typename === 'UsersError') {
+  if (data.users.__typename === 'PayloadError') {
     return <div>{errorMessage(data.users.error)}</div>;
   }
 

apps/main/graphql-codegen.yml

@@ -15,8 +15,6 @@ generates:
     plugins:
       - typescript-operations
       - typescript-react-apollo
-      - add:
-          content: '/* eslint-disable @typescript-eslint/explicit-function-return-type */'
     config:
       enumsAsTypes: true
       nonOptionalTypename: true

apps/main/pages/api/graphql.ts

@@ -1,28 +1,29 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { createServer } from '@graphql-yoga/node';
-import { enableIf } from '@envelop/core';
+import { createYoga, createSchema } from 'graphql-yoga';
 import { useDisableIntrospection } from '@envelop/disable-introspection';
-import { User } from '@bam/main-prisma';
-import { resolvers, getTypeDefs } from '@bam/graph-backend';
+import type { User } from '@bam/main-prisma';
+import { resolvers, typeDefs } from '@bam/graph-backend';
 import { prisma } from '../../backend/database/client';
 
 const mode = process.env.NODE_ENV;
 const isDev = mode === 'development';
 
-const server = createServer<{
+interface NextDefaultContext {
   req: NextApiRequest;
   res: NextApiResponse;
-}>({
-  schema: {
-    typeDefs: getTypeDefs(),
+}
+const server = createYoga<NextDefaultContext>({
+  schema: createSchema<NextDefaultContext>({
+    typeDefs: typeDefs,
     resolvers: resolvers,
-  },
+  }),
+  landingPage: isDev,
   graphiql: isDev,
   parserCache: true,
   validationCache: true,
   maskedErrors: !isDev,
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  plugins: [enableIf(!isDev, useDisableIntrospection())],
+  plugins: [!isDev && useDisableIntrospection()],
   context: async () => {
     const user: User | null = null;
 

apps/main/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "main",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/main",
   "projectType": "application",
@@ -16,17 +17,12 @@
           "outputPath": "apps/main"
         },
         "production": {
-          "fileReplacements": [
-            {
-              "replace": "libs/graph-backend/src/schemas/utils/getTypeDefs.ts",
-              "with": "libs/graph-backend/src/schemas/utils/getTypeDefs.prod.js"
-            }
-          ]
+          "fileReplacements": []
         }
       }
     },
     "build-for-runtime": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "vercel",
       "configurations": {
         "vercel": {
@@ -47,7 +43,9 @@
       "configurations": {
         "development": {
           "buildTarget": "main:build:development",
-          "dev": true
+          "dev": true,
+          "hostname": "0.0.0.0",
+          "port": 4200
         },
         "production": {
           "buildTarget": "main:build:production",
@@ -63,7 +61,7 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/main"],
+      "outputs": ["{workspaceRoot}/coverage/apps/main"],
       "options": {
         "jestConfig": "apps/main/jest.config.ts",
         "passWithNoTests": true
@@ -78,7 +76,7 @@
     },
     "graphql-codegen": {
       "executor": "@eddeee888/nx-graphql-code-generator:codegen",
-      "outputs": ["apps/main/frontend/graph/generated"],
+      "outputs": ["{projectRoot}/frontend/graph/generated"],
       "options": {
         "configFile": "apps/main/graphql-codegen.yml",
         "watch": false