-1

I am trying to make the graphql server in next 13 without using any toolkit like apollo, grafbase,graphql-yoga. Just pure graphql server. But i am getting the error in the browser:Failed to load resource: the server responded with a status of 405 ()

Why I am unable to use this. Or can you please suggest the simplest way to create pure graphql server inside the next13.

HERE is my code: api/graphql/route.js:

import schema from "../schema";
import resolvers from "../resolvers";
import {graphql} from "graphql";
import { NextResponse } from "next/server";
export async function POST() {
  // const { query } = req.body;
console.log("Helo")
  const response = await graphql(schema, query, resolvers);
  console.log(response);

  return NextResponse.json(JSON.stringify(response));
}

Trying to fetch like this: app/login/page.js:

'use client';
import { useEffect } from 'react';

export default function GraphQLAPI() {
  useEffect(() => {
    const handleRequest = async () => {
      const response = await fetch('/api/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: '{ hello }' }),
      });

      const { data } = await response.json;
      console.log(data);
    };

    handleRequest();
  }, []);

  return <div>GraphQL API</div>;
}

Dependencies are:

"autoprefixer": "10.4.14",
    "bson": "^5.3.0",
    "dotenv": "^16.0.3",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.2",
    "graphql": "^15.8.0",
    "micro": "^10.0.1",
    "mongodb": "^5.5.0",
    "mongoose": "^7.2.1",
    "next": "13.4.2",
    "next-redux-wrapper": "^8.1.0",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "tailwindcss": "3.3.2"

Please suggest me the simplest way to create graphql server without using any toolkit.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Kirti
  • 1
  • 1

1 Answers1

0

While I'd always recommend using a framework or library for this kind of thing (because most likely a lot more edge cases and security issues have been caught already) it is possible to do something like the following using graphql:

import { GraphQLError, graphql } from "graphql";
import { NextRequest, NextResponse } from "next/server";

function handler(req: NextRequest) {
  const { method, body } = req;

  if (method !== "GET" && method !== "POST") {
    return NextResponse.json(
      { message: "Method not allowed" },
      {
        status: 405,
        headers: {
          Allow: "GET,POST",
        },
      }
    );
  }

  const { query, variables, operationName } = body;

  try {
    const result = await graphql({
      schema,
      variableValues: variables,
      operationName,
      source: query,
    });
  } catch (err) {
    return NextResponse.json(new GraphQLError(err.message));
  }
}

export { handler as GET, handler as POST };

Note: You'll need to pass it your schema and handle the GET request. You could get from the url the query params and check for query and if that is not present, return another error similar to the method not allowed.

notrab
  • 51
  • 4