How to configure NextJS Server API GraphQL Subscription - reactjs

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