feat: add Apollo GraphQL workspace (#95)

Author: philipjfulcher

apollo-graphql/.gitignore

@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache
+.nx/workspace-data
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*

apollo-graphql/.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

apollo-graphql/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

apollo-graphql/README.md

@@ -0,0 +1,30 @@
+# Tutorial: Using Apollo GraphQL in an Nx Workspace
+
+Source code for the Apollo GraphQL article on the Nx blog:
+- Tutorial: https://nx.dev/blog/using-apollo-graphql-in-an-nx-workspace
+
+## What's inside?
+
+This example contains a GraphQL api app, a React frontend app, code generation with GraphQL Codegen that started from the `node` preset. 
+
+```
+npx create-nx-workspace@latest --preset=node nx-apolloe
+```
+
+It contains 
+
+- an `api` application using Apollo Server: `apps/api`
+- a `frontend` application using React: `apps/frontend`
+- two libraries: `libs/models-graphql` which contains the GraphQL schema and generated TypeScript models and `libs/feature-sets` which has container components that fetch data for the frontend.
+- Uses Graphql Codegen to generate TypeScript code from GraphQL schemas and operations
+
+Follow through the tutorial linked above for more details.
+
+## How to run it
+
+Clone it locally, install all dependencies using `npm install`. You can then run commands Like
+
+- `npx nx serve api` to serve the backend
+- `npx nx serve frontend` to serve the frontend
+- `npx nx run-many -t codegen` to generate code using GraphQL codegen
+- you can use `npx nx graph` to visualize the structure

apollo-graphql/apps/api/codegen.ts

@@ -0,0 +1,16 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: 'libs/models-graphql/src/lib/schema.graphql',
+  generates: {
+    'apps/api/src/__generated__/resolvers.ts': {
+      plugins: ['add', 'typescript-resolvers'],
+      config: {
+        useIndexSignature: true,
+        content: 'import * as types from "@nx-apollo/models-graphql"',
+        namespacedImportName: 'types',
+      },
+    },
+  },
+};
+export default config;

apollo-graphql/apps/api/project.json

@@ -0,0 +1,61 @@
+{
+  "name": "api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/api/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "platform": "node",
+        "outputPath": "dist/apps/api",
+        "format": ["esm"],
+        "bundle": false,
+        "main": "apps/api/src/main.ts",
+        "tsConfig": "apps/api/tsconfig.app.json",
+        "assets": ["apps/api/src/assets"],
+        "generatePackageJson": true,
+        "esbuildOptions": {
+          "sourcemap": true,
+          "outExtension": {
+            ".js": ".js"
+          }
+        }
+      },
+      "configurations": {
+        "development": {},
+        "production": {
+          "esbuildOptions": {
+            "sourcemap": false,
+            "outExtension": {
+              ".js": ".js"
+            }
+          }
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": ["build"],
+      "options": {
+        "buildTarget": "api:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "api:build:development"
+        },
+        "production": {
+          "buildTarget": "api:build:production"
+        }
+      }
+    },
+    "codegen": {
+      "command": "npx graphql-codegen --config {projectRoot}/codegen.ts"
+    }
+  }
+}

apollo-graphql/apps/api/src/__generated__/resolvers.ts

@@ -0,0 +1,69 @@
+import { ApolloServer } from '@apollo/server';
+import { startStandaloneServer } from '@apollo/server/standalone';
+import { Set } from '@nx-apollo/models-graphql';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { Resolvers } from './__generated__/resolvers';
+
+// Note: this uses a path relative to the project's
+// root directory, which is the current working directory
+// if the server is executed using `npm run`.
+const typeDefs = readFileSync(
+  join('libs/models-graphql/src/lib', 'schema.graphql'),
+  { encoding: 'utf-8' }
+);
+
+const sets: Set[] = [
+  {
+    id: 1,
+    name: 'Voltron',
+    numParts: 2300,
+    year: '2019',
+  },
+  {
+    id: 2,
+    name: 'Ship in a Bottle',
+    numParts: 900,
+    year: '2019',
+  },
+];
+
+// Resolvers define how to fetch the types defined in your schema.
+// This resolver retrieves books from the "books" array above.
+const resolvers: Resolvers = {
+  Query: {
+    allSets: () => sets,
+  },
+  Mutation: {
+    addSet: (parent, args) => {
+      const newSet = {
+        id: sets.length + 1,
+        name: args.name,
+        year: args.year,
+        numParts: +args.numParts,
+      };
+
+      sets.push(newSet);
+
+      return newSet;
+    },
+  },
+};
+
+// The ApolloServer constructor requires two parameters: your schema
+// definition and your set of resolvers.
+const server = new ApolloServer({
+  typeDefs,
+  resolvers,
+});
+
+// Passing an ApolloServer instance to the `startStandaloneServer` function:
+//  1. creates an Express app
+//  2. installs your ApolloServer instance as middleware
+//  3. prepares your app to handle incoming requests
+const { url } = await startStandaloneServer(server, {
+  listen: { port: 4000 },
+});
+
+console.log(`🚀  Server ready at: ${url}`);
+

apollo-graphql/apps/api/src/assets/.gitkeep

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "lib": ["es2020"],
+    "target": "es2020",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": []
+}

apollo-graphql/apps/api/src/main.ts

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

apollo-graphql/apps/api/tsconfig.app.json

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Frontend</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>