CODEWITHSUNDEEP
next.jsapollo-servertypegraphql
Tomáš Vavřinka
Tomáš Vavřinka

Reputation: 632

Next JS api routes with type graphql error (resolver is not a function)

I wanted to set-up a new Next JS project with graphql using TypeGraphQL. I thought it is a good idea to skip stand alone server and use API routes provided by Next JS. Here is an example I was inspired by. Unfortunately I can't get graphql up and running.

Next JS starts without errors but it throws one right after sending request to api/graphql

TypeError: resolver is not a function
    at apiResolver (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/api-utils.js:6:7)
    at DevServer.handleApiRequest (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/next-server.js:43:427)
    at async Object.fn (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/next-server.js:35:764)
    at async Router.execute (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/router.js:28:28)
    at async DevServer.run (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/next-server.js:44:494)
    at async DevServer.handleRequest (/home/vavra/Projects/project-united/node_modules/next/dist/next-server/server/next-server.js:13:133)

Here is my file src/pages/api/graphql

import { Resolver, Query } from "type-graphql";
import { ApolloServer } from "apollo-server-micro";
import { buildSchema } from "type-graphql";
import "reflect-metadata";

@Resolver()
class HelloResolver {
  @Query(() => String)
  hello() {
    return "hello";
  }
}

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

export default (async () => {
  const schema = await buildSchema({
    resolvers: [HelloResolver],
  });

  const apolloServer = new ApolloServer({ schema });

  return apolloServer.createHandler({ path: "/api/graphql" });
})();

Any help with this?

Upvotes: 0

Views: 3601

Answers (1)

Kenth Encalada
Kenth Encalada

Reputation: 31

here they were talking about a similar problem, and with this form I work nextjs with type-graphql.

pages/api/graphql

import 'reflect-metadata';
import { ApolloServer } from 'apollo-server-micro';
import { buildSchema } from 'type-graphql';
import youResolver from '../resolvers/youResolver';
import { NextApiRequest, NextApiResponse } from 'next';

let apolloServerHandler: (req: any, res: any) => Promise<void>;

const getApolloServerHandler = async () => {
  if (!apolloServerHandler) {
    const schema = await buildSchema({
      resolvers: [youResolver],
    });
    apolloServerHandler = new ApolloServer({ schema }).createHandler({
      path: '/api/graphql',
    });
  }
  return apolloServerHandler;
};

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const apolloServerHandler = await getApolloServerHandler();
  return apolloServerHandler(req, res);
};

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

Upvotes: 3

Related Questions