Refactor GraphQL Server and CreateYoga to Support "api serve" with Fa…

…stify Server (#8339) * Move makeMergedSchema * refactor createGraphQLYoga * Make a Fastify plugin for graphql yoga * Set yoga options * Adds graphql fastify plugin to template * Whitespace * Adds allowGraphiQL config setting and docs * fastify gql plugin awaits * Merge in subscriptions into schema from project * Get to green on tests * Fix subscriptions module api import * Tests makeSubscriptions * Fastify graphql plugin needed graphqlserver package * remove unneeded comments * Update docs/docs/graphql.md * Adds HookHandlerDoneFunction * Update packages/cli/src/commands/experimental/templates/server.ts.template Co-authored-by: Dominic Saadi <[email protected]> --------- Co-authored-by: Dominic Saadi <[email protected]>
redwoodjs · May 18, 2023 · b28669e · b28669e
1 parent cb73537
commit b28669e
Show file tree

Hide file tree

Showing 31 changed files with 705 additions and 379 deletions.
diff --git a/docs/docs/graphql.md b/docs/docs/graphql.md
@@ -1452,9 +1452,9 @@ The [GraphQL Playground](https://www.graphql-yoga.com/docs/features/graphiql) is
 
 > Because both introspection and the playground share possibly sensitive information about your data model, your data, your queries and mutations, best practices for deploying a GraphQL Server call to disable these in production, RedwoodJS **, by default, only enables introspection and the playground when running in development**. That is when `process.env.NODE_ENV === 'development'`.
 
-However, there may be cases where you want to enable introspection. You can enable introspection by setting the `allowIntrospection` option to `true`.
+However, there may be cases where you want to enable introspection as well as the GraphQL PLaygrouns. You can enable introspection by setting the `allowIntrospection` option to `true` and enable GraphiQL by setting `allowGraphiQL` to `true`.
 
-Here is an example of `createGraphQLHandler` function with the `allowIntrospection` option set to `true`:
+Here is an example of `createGraphQLHandler` function with the `allowIntrospection` and `allowGraphiQL` options set to `true`:
 ```ts {8}
 export const handler = createGraphQLHandler({
   authDecoder,
@@ -1464,6 +1464,7 @@ export const handler = createGraphQLHandler({
   sdls,
   services,
   allowIntrospection: true, // 👈 enable introspection in all environments
+  allowGraphiQL: true, // 👈 enable GraphiQL Playground in all environments
   onException: () => {
     // Disconnect from your database with an unhandled exception.
     db.$disconnect()
@@ -1475,8 +1476,13 @@ export const handler = createGraphQLHandler({
 
 Enabling introspection in production may pose a security risk, as it allows users to access information about your schema, queries, and mutations. Use this option with caution and make sure to secure your GraphQL API properly.
 
+The may be cases where one wants to allow introspection, but not GraphiQL.
+
+Or, you may want to enable GraphiQL, but not allow introspection; for example, to try out known queries, but not to share the entire set of possible operations and types.
+
 :::
 
+
 ### GraphQL Armor Configuration
 
 [GraphQL Armor](https://escape.tech/graphql-armor/) is a middleware that adds a security layer the RedwoodJS GraphQL endpoint configured with sensible defaults.

diff --git a/packages/cli/src/commands/experimental/templates/server.ts.template b/packages/cli/src/commands/experimental/templates/server.ts.template
@@ -1,40 +1,49 @@
 import path from 'path'
 
+// import { useLiveQuery } from '@envelop/live-query'
 import chalk from 'chalk'
 import { config } from 'dotenv-defaults'
 import Fastify from 'fastify'
+import { OperationTypeNode } from 'graphql'
 
 import {
   coerceRootPath,
   redwoodFastifyWeb,
   redwoodFastifyAPI,
+  redwoodFastifyGraphQLServer,
   DEFAULT_REDWOOD_FASTIFY_CONFIG,
 } from '@redwoodjs/fastify'
 import { getPaths, getConfig } from '@redwoodjs/project-config'
 
+import directives from 'src/directives/**/*.{js,ts}'
+import sdls from 'src/graphql/**/*.sdl.{js,ts}'
+import services from 'src/services/**/*.{js,ts}'
+
+import { logger } from './lib/logger'
+
 async function serve() {
   // Load .env files
   const redwoodProjectPaths = getPaths()
+  const redwoodConfig = getConfig()
+
+  const apiRootPath = coerceRootPath(redwoodConfig.web.apiUrl)
+  const port = redwoodConfig.web.port
+
+  const tsServer = Date.now()
 
   config({
     path: path.join(redwoodProjectPaths.base, '.env'),
     defaults: path.join(redwoodProjectPaths.base, '.env.defaults'),
     multiline: true,
   })
 
-  const tsServer = Date.now()
   console.log(chalk.italic.dim('Starting API and Web Servers...'))
 
   // Configure Fastify
   const fastify = Fastify({
     ...DEFAULT_REDWOOD_FASTIFY_CONFIG,
   })
 
-  const redwoodConfig = getConfig()
-
-  const apiRootPath = coerceRootPath(redwoodConfig.web.apiUrl)
-  const port = redwoodConfig.web.port
-
   await fastify.register(redwoodFastifyWeb)
 
   await fastify.register(redwoodFastifyAPI, {
@@ -43,6 +52,24 @@ async function serve() {
     },
   })
 
+  await fastify.register(redwoodFastifyGraphQLServer, {
+    loggerConfig: {
+      logger: logger,
+      options: { query: true, data: true, level: 'trace' },
+    },
+    graphiQLEndpoint: '/yoga',
+    sdls,
+    services,
+    directives,
+    allowIntrospection: true,
+    allowGraphiQL: true,
+    allowedOperations: [
+      OperationTypeNode.SUBSCRIPTION,
+      OperationTypeNode.QUERY,
+      OperationTypeNode.MUTATION,
+    ],
+  })
+
   // Start
   fastify.listen({ port })
 
@@ -55,7 +82,7 @@ async function serve() {
     console.log(`API serving from ${apiServer}`)
     console.log(`API listening on ${on}`)
     const graphqlEnd = chalk.magenta(`${apiRootPath}graphql`)
-    console.log(`GraphQL endpoint at ${graphqlEnd}`)
+    console.log(`GraphQL function endpoint at ${graphqlEnd}`)
   })
 
   process.on('exit', () => {

diff --git a/packages/fastify/build.mjs b/packages/fastify/build.mjs
@@ -4,6 +4,7 @@ await esbuild.build({
   entryPoints: [
     'src/api.ts',
     'src/config.ts',
+    'src/graphql.ts',
     'src/index.ts',
     'src/types.ts',
     'src/web.ts',

diff --git a/packages/fastify/package.json b/packages/fastify/package.json
@@ -21,6 +21,7 @@
     "@fastify/http-proxy": "9.1.0",
     "@fastify/static": "6.10.1",
     "@fastify/url-data": "5.3.1",
+    "@redwoodjs/graphql-server": "5.0.0",
     "@redwoodjs/project-config": "5.0.0",
     "ansi-colors": "4.1.3",
     "fast-glob": "3.2.12",

diff --git a/packages/fastify/src/graphql.ts b/packages/fastify/src/graphql.ts
@@ -0,0 +1,46 @@
+import type { FastifyInstance, HookHandlerDoneFunction } from 'fastify'
+
+import type { GraphQLYogaOptions } from '@redwoodjs/graphql-server'
+import { createGraphQLYoga } from '@redwoodjs/graphql-server'
+/**
+ * Encapsulates the routes
+ * @param {FastifyInstance} fastify  Encapsulated Fastify Instance
+ * @param {Object} options plugin options, refer to https://www.fastify.io/docs/latest/Reference/Plugins/#plugin-options
+ */
+export async function redwoodFastifyGraphQLServer(
+  fastify: FastifyInstance,
+  options: GraphQLYogaOptions,
+  done: HookHandlerDoneFunction
+) {
+  try {
+    const { yoga } = createGraphQLYoga(options)
+
+    fastify.route({
+      url: yoga.graphqlEndpoint,
+      method: ['GET', 'POST', 'OPTIONS'],
+      handler: async (req, reply) => {
+        const response = await yoga.handleNodeRequest(req, {
+          req,
+          reply,
+        })
+
+        for (const [name, value] of response.headers) {
+          reply.header(name, value)
+        }
+
+        reply.status(response.status)
+        reply.send(response.body)
+
+        return reply
+      },
+    })
+
+    fastify.ready(() => {
+      console.log(`GraphQL Yoga Server endpoint at ${yoga.graphqlEndpoint}`)
+    })
+
+    done()
+  } catch (e) {
+    console.log(e)
+  }
+}
diff --git a/packages/fastify/src/index.ts b/packages/fastify/src/index.ts
@@ -10,6 +10,7 @@ export function createFastifyInstance(options?: FastifyServerOptions) {
 
 export { redwoodFastifyAPI } from './api.js'
 export { redwoodFastifyWeb } from './web.js'
+export { redwoodFastifyGraphQLServer } from './graphql.js'
 
 export type * from './types.js'
 

diff --git a/packages/graphql-server/src/__tests__/cors.test.ts b/packages/graphql-server/src/__tests__/cors.test.ts
@@ -4,7 +4,7 @@ import { createLogger } from '@redwoodjs/api/logger'
 
 import { createGraphQLHandler } from '../functions/graphql'
 
-jest.mock('../makeMergedSchema/makeMergedSchema', () => {
+jest.mock('../makeMergedSchema', () => {
   const { makeExecutableSchema } = require('@graphql-tools/schema')
   // Return executable schema
   return {

diff --git a/packages/graphql-server/src/__tests__/makeDirectives.test.ts b/packages/graphql-server/src/__tests__/makeDirectives.test.ts
@@ -18,7 +18,7 @@ const bazingaSchema = gql`
 const barSchema = gql`
   directive @bar on FIELD_DEFINITION
 `
-test('Should map globs to defined structure correctly', async () => {
+test('Should map directives globs to defined structure correctly', async () => {
   // Mocking what our import-dir plugin would do
   const directiveFiles = {
     foo_directive: {

diff --git a/...Schema/__tests__/makeMergedSchema.test.ts → ...er/src/__tests__/makeMergedSchema.test.ts b/...Schema/__tests__/makeMergedSchema.test.ts → ...er/src/__tests__/makeMergedSchema.test.ts
@@ -5,13 +5,13 @@ import {
   makeDirectivesForPlugin,
   createTransformerDirective,
   createValidatorDirective,
-} from '../../directives/makeDirectives'
+} from '../directives/makeDirectives'
+import { makeMergedSchema } from '../makeMergedSchema'
 import {
   GraphQLTypeWithFields,
   ServicesGlobImports,
   SdlGlobImports,
-} from '../../types'
-import { makeMergedSchema } from '../makeMergedSchema'
+} from '../types'
 
 jest.mock('@redwoodjs/project-config', () => {
   return {
@@ -138,6 +138,7 @@ describe('makeMergedSchema', () => {
   const schema = makeMergedSchema({
     sdls,
     services,
+    subscriptions: [],
     directives: makeDirectivesForPlugin(directiveFiles),
   })
 

diff --git a/packages/graphql-server/src/__tests__/makeSubscriptions.test.ts b/packages/graphql-server/src/__tests__/makeSubscriptions.test.ts
@@ -0,0 +1,70 @@
+import gql from 'graphql-tag'
+
+import { makeSubscriptions } from '../subscriptions/makeSubscriptions'
+const countdownSchema = gql`
+  type Subscription {
+    countdown(from: Int!, interval: Int!): Int!
+  }
+`
+
+const newMessageSchema = gql`
+  type Message {
+    from: String
+    body: String
+  }
+
+  type Subscription {
+    newMessage(roomId: ID!): Message!
+  }
+`
+describe('Should map subscription globs to defined structure correctly', () => {
+  it('Should map a subscribe correctly', async () => {
+    // Mocking what our import-dir plugin would do
+    const subscriptionFiles = {
+      countdown_subscription: {
+        schema: countdownSchema,
+        countdown: {
+          async *subscribe(_, { from, interval }) {
+            for (let i = from; i >= 0; i--) {
+              await new Promise((resolve) =>
+                setTimeout(resolve, interval ?? 1000)
+              )
+              yield { countdown: i }
+            }
+          },
+        },
+      },
+    }
+
+    const [countdownSubscription] = makeSubscriptions(subscriptionFiles)
+
+    expect(countdownSubscription.schema.kind).toBe('Document')
+    expect(countdownSubscription.name).toBe('countdown')
+    expect(countdownSubscription.resolvers.subscribe).toBeDefined()
+    expect(countdownSubscription.resolvers.resolve).not.toBeDefined()
+  })
+
+  it('Should map a subscribe and resolve correctly', async () => {
+    // Mocking what our import-dir plugin would do
+    const subscriptionFiles = {
+      newMessage_subscription: {
+        schema: newMessageSchema,
+        newMessage: {
+          subscribe: (_, { roomId }) => {
+            return roomId
+          },
+          resolve: (payload) => {
+            return payload
+          },
+        },
+      },
+    }
+
+    const [newMessageSubscription] = makeSubscriptions(subscriptionFiles)
+
+    expect(newMessageSubscription.schema.kind).toBe('Document')
+    expect(newMessageSubscription.name).toBe('newMessage')
+    expect(newMessageSubscription.resolvers.subscribe).toBeDefined()
+    expect(newMessageSubscription.resolvers.resolve).toBeDefined()
+  })
+})