IDEA: Investigate Next.js Edge Runtime compatibility

[ardatan]

https://nextjs.org/docs/api-routes/edge-api-routes

[paales]

So I'm giving it another try to get Edge functions working and this is what I've got so far. PR where progress can be tracked

Motivation

We currently deploy the Mesh in Next.js API functions which is running on AWS Lambda. Which has two considerable issues:

• Lambda's are billed by execution time instead of CPU time it becomes very costly very quickly. Edge functions are billed by CPU time which is way more interesting for a gateway like GraphQL Mesh
• The cold boot time in next.js is 10-13+ seconds which should be considerable less.

I do have my reservations about edge functions if they are good enough: They currently allow for 50ms of CPU time and 128MB of RAM. I'm not quite sure how all this is measured and if this is split in 'bootup' and 'execution'. Trying to get this to find out :)

Current issues

Updating the api/graphql.ts file to be this allows it to somewhat work on my machine:

import { createBuiltMeshHTTPHandler } from '@graphcommerce/graphql-mesh'
import { NextRequest } from 'next/server'

const handler = createBuiltMeshHTTPHandler()

export default async function handle(request: NextRequest) {
  return handler.fetch(request.url, request)
}

export const config = { runtime: 'edge' }

To even get to a buildable state we need to patch quite a few packages, to remove occurrences of new Function('x') and remove occurrences of node function calls: https://github.com/graphcommerce-org/graphcommerce/pull/1772/files#diff-19ef71a73a1e9cd311b0aa5f2fee0802a62b54794e4d12bc676f2ce42a57c35b

After that it seems to be doing something, during development:

• The playground loads as intended
• The introspection query works as expected.
• Next.js seems to be reloading the complete serverless function on every run. This means it adds an additional 4 seconds of latency to every request.
• Dataloader needed to be patched because nextjs complains about process.nextTick being there. API Edge function reports used process.nextTick while it is checking it to exist in facebook/dataloader vercel/next.js#44711
• Lodash needs to be patched Cannot use lodash on Netlify Edge Runtime (in NextJS middleware) lodash/lodash#5525
• I can't yet get any actual queries working getting Unexpected error value {}

Trace: using console.trace here
    at new NonErrorThrown (webpack-internal:///(middleware)/../../node_modules/graphql/jsutils/toError.mjs:19:15)
    at toError (webpack-internal:///(middleware)/../../node_modules/graphql/jsutils/toError.mjs:14:7)
    at locatedError (webpack-internal:///(middleware)/../../node_modules/graphql/error/locatedError.mjs:18:86)
    at eval (webpack-internal:///(middleware)/../../node_modules/@graphql-tools/executor/esm/execution/execute.js:328:84)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async promiseForObject (webpack-internal:///(middleware)/../../node_modules/@graphql-tools/executor/esm/execution/promiseForObject.js:15:28)
    at async subschemaExecute (webpack-internal:///(middleware)/../../node_modules/@graphql-mesh/runtime/esm/useSubschema.js:66:32)
    at async eval (webpack-internal:///(middleware)/../../node_modules/@envelop/core/esm/orchestrator.js:378:27)
    at async YogaServer.getResultForParams (webpack-internal:///(middleware)/../../node_modules/graphql-yoga/esm/server.js:294:26)
    at async YogaServer.getResponse (webpack-internal:///(middleware)/../../node_modules/graphql-yoga/esm/server.js:360:23)
    at async YogaServer.handle (webpack-internal:///(middleware)/../../node_modules/graphql-yoga/esm/server.js:70:34)
    at async handle (webpack-internal:///(middleware)/../../node_modules/itty-router/dist/itty-router.min.mjs:6:569)
    at async adapter (webpack-internal:///(middleware)/../../node_modules/next/dist/esm/server/web/adapter.js:112:20)
    at async /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/web/sandbox/sandbox.js:73:24
    at async DevServer.runEdgeFunction (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:1411:24)
    at async DevServer.runApi (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:467:47)
    at async Object.fn (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:749:37)
    at async Router.execute (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/router.js:253:36)
    at async DevServer.run (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/base-server.js:384:29)
    at async DevServer.run (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/dev/next-dev-server.js:741:20)
    at async DevServer.handleRequest (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/base-server.js:322:20)

Since it build I've tried to deploy it to the online environment, but running into issues there:

• No available storage method found

/api/graphql
08:36:29:10
Error: No available storage method found.
    at ../../node_modules/localforage/dist/localforage.js:2762:0

I tried configuring INMEMORY_LRU directly but then getting the same error.

@ardatan Running into quite a few roadblock to get this to work unfortunately, not sure how to resolve these. Would be nice to get over a few bumps so I can investigate further.