New Yoga-specific hooks for plugins: onRequestParse & onRequestParseD…

…one (#1136)

* New Yoga-specific hooks for plugins: onRequestParse & onRequestParseDone

* Add server context to the hook params

* Small refactor

* Memoize headers

* ..

* No need to memoize things

* Try memoization

* Better

* Seperate packages

* Fix workspace

* Cleanup

* Type imports

* Update

* Maybe??

* ..

* ..

.changeset/neat-pumpkins-attack.md

@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/common': minor
+---
+
+New Yoga-specific hooks for plugins: onRequestParse & onRequestParseDone

package.json

@@ -37,6 +37,7 @@
   },
   "workspaces": [
     "packages/*",
+    "packages/plugins/*",
     "examples/**/*",
     "benchmark/*",
     "website",

packages/common/src/index.ts

@@ -5,3 +5,6 @@ export * from './server'
 export * from './graphiql'
 export * from '@envelop/core'
 export * from '@graphql-yoga/subscription'
+export * from './plugins/types'
+export * from './plugins/useRequestParser'
+export { Plugin } from './plugins/types'

packages/common/src/plugins/requestParser/GET.ts

@@ -0,0 +1,31 @@
+import { GraphQLParams } from '../../types'
+import { Plugin } from '../types'
+
+export function isGETRequest(request: Request) {
+  return request.method === 'GET'
+}
+
+export function parseGETRequest(request: Request): GraphQLParams {
+  const [, searchParamsStr] = request.url.split('?')
+  const searchParams = new URLSearchParams(searchParamsStr)
+  const operationName = searchParams.get('operationName') || undefined
+  const query = searchParams.get('query') || undefined
+  const variables = searchParams.get('variables') || undefined
+  const extensions = searchParams.get('extensions') || undefined
+  return {
+    operationName,
+    query,
+    variables: variables ? JSON.parse(variables) : undefined,
+    extensions: extensions ? JSON.parse(extensions) : undefined,
+  }
+}
+
+export function useGETRequestParser(): Plugin {
+  return {
+    onRequestParse: async ({ request, setRequestParser }) => {
+      if (isGETRequest(request)) {
+        setRequestParser(parseGETRequest)
+      }
+    },
+  }
+}

packages/common/src/plugins/requestParser/POST.ts

@@ -0,0 +1,26 @@
+import { GraphQLParams } from '../../types'
+import { Plugin } from '../types'
+import { useRequestParser } from '../useRequestParser'
+
+export function isPOSTRequest(request: Request) {
+  return request.method === 'POST'
+}
+
+export async function parsePOSTRequest(
+  request: Request,
+): Promise<GraphQLParams> {
+  const requestBody = await request.json()
+  return {
+    operationName: requestBody.operationName,
+    query: requestBody.query,
+    variables: requestBody.variables,
+    extensions: requestBody.extensions,
+  }
+}
+
+export function usePOSTRequestParser(): Plugin {
+  return useRequestParser({
+    match: isPOSTRequest,
+    parse: parsePOSTRequest,
+  })
+}

packages/common/src/plugins/requestParser/POSTMultipart.ts

@@ -0,0 +1,42 @@
+import { dset } from 'dset'
+import { GraphQLParams } from '../../types'
+import { Plugin } from '../types'
+import { useRequestParser } from '../useRequestParser'
+import { isPOSTRequest } from './POST'
+
+export function isPOSTMultipartRequest(request: Request): boolean {
+  return (
+    isPOSTRequest(request) &&
+    !!request.headers.get('content-type')?.startsWith('multipart/form-data')
+  )
+}
+
+export async function parsePOSTMultipartRequest(
+  request: Request,
+): Promise<GraphQLParams> {
+  const requestBody = await request.formData()
+  const operationsStr = requestBody.get('operations')?.toString() || '{}'
+  const operations = JSON.parse(operationsStr)
+
+  const mapStr = requestBody.get('map')?.toString() || '{}'
+  const map = JSON.parse(mapStr)
+  for (const fileIndex in map) {
+    const file = requestBody.get(fileIndex)
+    const [path] = map[fileIndex]
+    dset(operations, path, file)
+  }
+
+  return {
+    operationName: operations.operationName,
+    query: operations.query,
+    variables: operations.variables,
+    extensions: operations.extensions,
+  }
+}
+
+export function usePOSTMultipartRequestParser(): Plugin {
+  return useRequestParser({
+    match: isPOSTMultipartRequest,
+    parse: parsePOSTMultipartRequest,
+  })
+}

packages/common/src/plugins/types.ts

@@ -0,0 +1,35 @@
+import { Plugin as EnvelopPlugin, PromiseOrValue } from '@envelop/core'
+import { GraphQLParams } from '../types'
+
+export type Plugin<
+  PluginContext extends Record<string, any> = {},
+  TServerContext = {},
+> = EnvelopPlugin<PluginContext> & {
+  onRequestParse?: OnRequestParseHook<TServerContext>
+}
+
+export type OnRequestParseHook<TServerContext> = (
+  payload: OnRequestParseEventPayload<TServerContext>,
+) => PromiseOrValue<void | OnRequestParseHookResult>
+
+export type RequestParser = (request: Request) => PromiseOrValue<GraphQLParams>
+
+export interface OnRequestParseEventPayload<TServerContext> {
+  serverContext: TServerContext | undefined
+  request: Request
+  requestParser: RequestParser
+  setRequestParser: (parser: RequestParser) => void
+}
+
+export type OnRequestParseHookResult = {
+  onRequestParseDone?: OnRequestParseDoneHook
+}
+
+export type OnRequestParseDoneHook = (
+  payload: OnRequestParseDoneEventPayload,
+) => PromiseOrValue<void>
+
+export interface OnRequestParseDoneEventPayload {
+  params: GraphQLParams
+  setParams: (params: GraphQLParams) => void
+}

packages/common/src/plugins/useRequestParser.ts

@@ -0,0 +1,23 @@
+import { Plugin } from './types'
+import { PromiseOrValue } from '@envelop/core'
+import { GraphQLParams } from '../types'
+
+interface RequestParserPluginOptions {
+  match?(request: Request): boolean
+  parse(request: Request): PromiseOrValue<GraphQLParams>
+}
+
+const DEFAULT_MATCHER = () => true
+
+export function useRequestParser(options: RequestParserPluginOptions): Plugin {
+  const matchFn = options.match || DEFAULT_MATCHER
+  return {
+    onRequestParse({ request, setRequestParser }) {
+      if (matchFn(request)) {
+        setRequestParser(function useRequestParserFn(request: Request) {
+          return options.parse(request)
+        })
+      }
+    },
+  }
+}