feat(request-handler): Adjusted middleware to be compatible with non-…

…express http implementations (e.g. nextjs http server)

BREAKING CHANGE: API changed

README.md

@@ -57,7 +57,7 @@ It will additionally remove the `@cache` directive and forward only the pure que
 There are no changes on your implementation required.
 
 ```js
-import { proxyCacheMiddleware, InMemoryCache } from 'apollo-proxy-cache'
+import { createProxyCacheMiddleware, InMemoryCache } from 'apollo-proxy-cache'
 import express from 'express'
 const queryCache = new InMemoryCache()
 import bodyParser from 'body-parser'
@@ -66,11 +66,14 @@ const proxyMiddlewareFactory = proxyCacheMiddleware(queryCache)
 
 const app = express()
 app.use(bodyParser.json()) // setup body-parser before (or anything else that populates request.body).
-proxyMiddlewareFactory(
-    app, 
-    '/graphql', /* the endpoint (will be proxied from localhost/graphql to target)*/
+const { directiveMiddleware, proxyMiddleware } = proxyMiddlewareFactory(
     { target: "http://graphql-server.com", changeOrigin: true } /* configuration object for http-proxy-middleware */
     )
+// directive middleware to remove directives and handle caching
+app.use( '/graphql', directiveMiddleware)
+
+// the proxy itself
+app.use( '/graphql', proxyMiddleware)
 ```
 
 

src/proxyCacheMiddleware.ts → src/createProxyCacheMiddleware.ts

@@ -2,7 +2,7 @@ import { createProxyMiddleware, Options } from 'http-proxy-middleware'
 import { parse } from 'graphql'
 import { print } from 'graphql/language/printer'
 import { hasDirectives } from 'apollo-utilities'
-import type { Application, Request } from 'express'
+import type { Request, Response, NextFunction } from 'express'
 import { decode } from './utils'
 import type { Cache } from './caches/types'
 import {
@@ -17,11 +17,12 @@ const CACHE_HEADER = 'X-Proxy-Cached'
 
 type RequestWithCache = Request & { _hasCache: { id: string; timeout: number } }
 
-export const proxyCacheMiddleware = <T extends Cache<string, any>>(
+export const createProxyCacheMiddleware = <T extends Cache<string, any>>(
   queryCache: T,
   cacheKeyModifier?: CacheKeyModifier
-) => (app: Application, endpoint: string, proxyConfig: Options) => {
-  app.use(endpoint, async (req, response, next) => {
+) => (proxyConfig: Options) => {
+
+  const directiveMiddleware = async (req: RequestWithCache, response: Response, next: NextFunction) => {
     if (!req.body) {
       console.warn(
         '[skip] proxy-cache-middleware, request.body is not populated. Please add "body-parser" middleware (or similar).'
@@ -53,14 +54,14 @@ export const proxyCacheMiddleware = <T extends Cache<string, any>>(
         errorOnGet(e)
       }
       // eslint-disable-next-line @typescript-eslint/no-extra-semi
-      ;(req as RequestWithCache)._hasCache = { id, timeout }
+      req._hasCache = { id, timeout }
       // could this be piped here (with req.pipe)
       req.body = { ...req.body, query: print(nextQuery) }
     }
     next()
-  })
+  }
 
-  const proxyInstance = createProxyMiddleware({
+  const proxyMiddleware = createProxyMiddleware({
     ...proxyConfig,
     onProxyReq: (proxyReq, req, res) => {
       let data
@@ -96,6 +97,5 @@ export const proxyCacheMiddleware = <T extends Cache<string, any>>(
     },
   })
 
-  app.use(endpoint, proxyInstance)
-  return proxyInstance
+  return { proxyMiddleware, directiveMiddleware }
 }

src/index.ts

@@ -1,5 +1,5 @@
 export { proxyCacheLink } from './proxyCacheLink'
-export { proxyCacheMiddleware } from './proxyCacheMiddleware'
+export { createProxyCacheMiddleware } from './createProxyCacheMiddleware'
 export { DIRECTIVE, removeCacheDirective } from './utils-browser-only'
 
 export { InMemoryCache } from './caches/inmemory'