How to configure NextJS Server API GraphQL Subscription

Question

currently i'm learning how to develop an application using graphql. I'm facing the error of implementing the subscription inside my application

resolver.js

const pubsub = new PubSub()
export const resolvers = {

  Mutation: {
    createCategory:async(parent,arg,{pubsub}) => {
      console.log(pubsub)
        const prisma = new PrismaClient();
        const {name} = arg

        await prisma.category.create({
            data:{
                name:name,
                author:{
                    connect:{
                        id: "vjuwU0KvWhVDehB1gPgJ7TFRwcy1"
                    }
                }
            }
        });

      pubsub.publish('NEW_CATEGORY',{
        newCategory:{
          id:"1"
        }
      })

        return true;
    }
  },
  Subscription:{
      category:{
          subscribe: (_,__,)=>pubsub.asyncIterator(['NEW_CATEGORY']),
      }
  }
};

api/graphql.js

const pubsub = new PubSub()

const apolloServer = new ApolloServer({ typeDefs, resolvers,context:({req,res})=>({req,res,pubsub})});

const startServer = apolloServer.start();

export default cors(async function handler(req, res) {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }
  await startServer;

  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
});

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

Error were occurred, i was unable to solve it due to this error message

error - image