fix(server): use file extension in import, fix graphql route register…

…ing (redwoodjs#9984)

This PR fixes two things related to the server file and the GraphQL
function.

- we have to specify file extensions with `await import` for relative
paths; there was one missing for importing the graphql plugin
- out of the box the graphql function was registered with double slashes
since `graphiQLEndpoint` defaults to `'/graphql'` and `apiRootPath`
defaults to `'/'`, resulting in `'//graphql'`

packages/api-server/src/createServer.ts

@@ -124,7 +124,7 @@ export async function createServer(options: CreateServerOptions = {}) {
   })
 
   if (graphqlFunctionPath) {
-    const { redwoodFastifyGraphQLServer } = await import('./plugins/graphql')
+    const { redwoodFastifyGraphQLServer } = await import('./plugins/graphql.js')
     // This comes from a babel plugin that's applied to api/dist/functions/graphql.{ts,js} in user projects
     const { __rw_graphqlOptions } = await import(
       `file://${graphqlFunctionPath}`

packages/api-server/src/plugins/graphql.ts

@@ -102,22 +102,24 @@ export async function redwoodFastifyGraphQLServer(
       return reply
     }
 
+    const graphqlEndpoint = trimSlashes(yoga.graphqlEndpoint)
+
     const routePaths = ['', '/health', '/readiness', '/stream']
     for (const routePath of routePaths) {
       fastify.route({
-        url: `${redwoodOptions.apiRootPath}${yoga.graphqlEndpoint}${routePath}`,
+        url: `${redwoodOptions.apiRootPath}${graphqlEndpoint}${routePath}`,
         method,
         handler: (req, reply) => graphQLYogaHandler(req, reply),
       })
     }
 
     fastify.addHook('onReady', (done) => {
-      console.info(`GraphQL Yoga Server endpoint at ${yoga.graphqlEndpoint}`)
+      console.info(`GraphQL Yoga Server endpoint at ${graphqlEndpoint}`)
       console.info(
-        `GraphQL Yoga Server Health Check endpoint at ${yoga.graphqlEndpoint}/health`
+        `GraphQL Yoga Server Health Check endpoint at ${graphqlEndpoint}/health`
       )
       console.info(
-        `GraphQL Yoga Server Readiness endpoint at ${yoga.graphqlEndpoint}/readiness`
+        `GraphQL Yoga Server Readiness endpoint at ${graphqlEndpoint}/readiness`
       )
 
       done()
@@ -126,3 +128,7 @@ export async function redwoodFastifyGraphQLServer(
     console.log(e)
   }
 }
+
+function trimSlashes(path: string) {
+  return path.replace(/^\/|\/$/g, '')
+}