gql sample

stacks/index.ts

@@ -1,24 +1,24 @@
-import * as sst from 'sst/constructs';
-import { Runtime } from 'aws-cdk-lib/aws-lambda';
-import { AppSyncApi } from './appSyncApi';
-import { Auth } from './auth';
-import { BastionHost } from './bastionHost';
-import { Database, GrantDBAccess } from './database';
-import { DatabaseMigrations } from './databaseMigrations';
-import { Dns } from './dns';
-import { Layers } from './layers';
-import { Network } from './network';
-import { RestApi } from './restApi';
-import { Web } from './web';
-import { Aspects } from 'aws-cdk-lib';
-import { Secrets } from './secrets';
+import * as sst from 'sst/constructs'
+import { Runtime } from 'aws-cdk-lib/aws-lambda'
+import { AppSyncApi } from './appSyncApi'
+import { Auth } from './auth'
+import { BastionHost } from './bastionHost'
+import { Database, GrantDBAccess } from './database'
+import { DatabaseMigrations } from './databaseMigrations'
+import { Dns } from './dns'
+import { Layers } from './layers'
+import { Network } from './network'
+import { RestApi } from './restApi'
+import { Web } from './web'
+import { Aspects } from 'aws-cdk-lib'
+import { Secrets } from './secrets'
 
 // deal with dynamic imports of node built-ins (e.g. "crypto")
 // from https://github.com/evanw/esbuild/pull/2067#issuecomment-1073039746
 // and hardcode __dirname for https://github.com/prisma/prisma/issues/14484
-export const ESM_REQUIRE_SHIM = `const require = (await import("node:module")).createRequire(import.meta.url);const __filename = (await import("node:url")).fileURLToPath(import.meta.url);globalThis.__dirname='/var/task';`;
+export const ESM_REQUIRE_SHIM = `const require = (await import("node:module")).createRequire(import.meta.url);const __filename = (await import("node:url")).fileURLToPath(import.meta.url);globalThis.__dirname='/var/task';`
 
-export const RUNTIME = Runtime.NODEJS_20_X;
+export const RUNTIME = Runtime.NODEJS_20_X
 
 export default function main(app: sst.App) {
   app.setDefaultFunctionProps({
@@ -40,7 +40,7 @@ export default function main(app: sst.App) {
     },
 
     // N.B. bundle settings are defined in Layers
-  });
+  })
 
   app
     .stack(Network)
@@ -49,13 +49,13 @@ export default function main(app: sst.App) {
     .stack(Layers)
     .stack(Database)
     .stack(BastionHost)
-    // .stack(DatabaseMigrations)
+    .stack(DatabaseMigrations)
     .stack(Auth)
     .stack(RestApi)
     .stack(AppSyncApi)
-    .stack(Web);
+    .stack(Web)
 
   // DB access
-  const { db, dbAccessSecurityGroup } = sst.use(Database);
-  if (db && dbAccessSecurityGroup) Aspects.of(app).add(new GrantDBAccess(db, dbAccessSecurityGroup));
+  const { db, dbAccessSecurityGroup } = sst.use(Database)
+  if (db && dbAccessSecurityGroup) Aspects.of(app).add(new GrantDBAccess(db, dbAccessSecurityGroup))
 }

web/app/sample/page.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { TestGql } from '../ui/TestGql'
+
+// graphql demo
+
+export default () => {
+  return (
+    <div>
+      <TestGql />
+    </div>
+  )
+}

web/app/ui/TestGql.tsx

@@ -1,20 +1,25 @@
-'use client';
+'use client'
 
-import { useMutation } from '@apollo/client';
-import { graphql } from '@common/generated/graphql';
+import { useMutation } from '@apollo/client'
+import { graphql } from '@common/generated/graphql'
 
-const greetMutation = graphql(`mutation Greet($name: String!) {\n  greet(name: $name) {\n    greeting\n  }\n}`);
+const greetMutation = graphql('mutation Greet($name: String!) {\n  greet(name: $name) {\n    greeting\n  }\n}')
 
 export const TestGql = () => {
-  const [greet] = useMutation(greetMutation);
+  const [greet, { data: greetResult, loading }] = useMutation(greetMutation)
 
   return (
-    <button
-      onClick={() => {
-        greet({ variables: { name: 'world' } });
-      }}
-    >
-      greet
-    </button>
-  );
-};
+    <div className="flex flex-col items-center justify-center h-screen">
+      <button
+        onClick={() => {
+          greet({ variables: { name: 'world' } })
+        }}
+      >
+        greet
+      </button>
+
+      {loading && <progress className="m-4 w-48" />}
+      {greetResult && <div>{greetResult.greet?.greeting}</div>}
+    </div>
+  )
+}

web/middleware.ts

@@ -1,9 +1,10 @@
-import NextAuth from 'next-auth';
-import { authConfig } from './auth.config';
+import NextAuth from 'next-auth'
+import { authConfig } from './auth.config'
 
-export default NextAuth(authConfig).auth;
+export default NextAuth(authConfig).auth
 
 export const config = {
-  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
-  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
-};
+  // require login for these paths
+  // https://nextjs.org/docs/app/building-your-application/routing/middleware
+  matcher: ['/sample/:path'],
+}