Apollo studio CORS error unable to reach server

I'm trying to setup apollo server in my NextJS project, I'm using apollo-server-micro and I ran into these issues:

the apollo studio sandbox is unable to reach the server due to CORS.

This is in pages/api/graphql

import { ApolloServer } from "apollo-server-micro";
import { typeDefs } from "./schemas";
import { resolvers } from "./resolvers/index";
import { createContext } from "./db/context";

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ res, req }) => createContext(res, req),
  uploads: false,
  introspection: true,
  formatError: (error) => {
    console.log(error);
    return error;
  },
});

export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
};

module.exports = apolloServer
  .start()
  .then(() => apolloServer.createHandler({ path: "/api/graphql" }));

then I tried to enable cors but without success because I get this error:

API resolved without sending a response for /api/graphql, this may result in stalled requests.

import { ApolloServer } from "apollo-server-micro";
import { typeDefs } from "./schemas";
import { resolvers } from "./resolvers/index";
import { createContext } from "./db/context";

import { send } from "micro";
import cors from "micro-cors";

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ res, req }) => createContext(res, req),
  uploads: false,
  introspection: true,
  formatError: (error) => {
    console.log(error);
    return error;
  },
});

export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
};

 module.exports = apolloServer.start().then(() => {
   const handler = apolloServer.createHandler({ path: "/api/graphql" });
   return cors((req, res) => {
     console.log(res);
     return req.method === "OPTIONS" ? send(res, 200, 'ok') : handler(req, res);
   });
 });