Nuxt3 example GraphQL (REST/Websocket) with Nitro (h3)

[ophickedo]

Describe the feature

Hello! Thanks to the Nuxt3 development team - cool stuff.

Request:

No documentation for "h3" with GraphQL: Websocket and REST .

Clean REST GraphQL Server example:

$ npm i graphql-yoga graphql

// http://localhost:3000/api/graphql
// server/api/graphql

import {
    GraphQLBoolean,
    GraphQLString,
    GraphQLObjectType,
    GraphQLSchema,
} from 'graphql'

import { createYoga } from 'graphql-yoga'

const schema = new GraphQLSchema({
    query: new GraphQLObjectType({
        name: 'Query',
        fields: {
            hello: {
                type: GraphQLString,
                resolve: () => 'world',
            },
            ping: {
                type: GraphQLBoolean,
                resolve: () => true,
            },
        }
    })
})

const yoga = createYoga({ schema, graphqlEndpoint: '/api/graphql' })

export default defineEventHandler((event) => {
    const { req, res } = event.node
    return yoga(req, res)
})

GraphQL query:

query Ping { ping }

Additional information

• [X] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[TheAlexLichter]

Would definitely be a nice example! Maybe a tiny project showcasing how to set up graphql with nitro only (or nuxt + nitro) would be good there 🤔

[ophickedo]

Updare about GraphQLJSON type.

If use "graphql-type-json'" package default import "GraphQLJSON" not works with Nitro, but GraphQLJSONObject works well.

import { createYoga } from 'graphql-yoga'

import {
    GraphQLObjectType,
    GraphQLSchema,
    GraphQLBoolean,
    GraphQLString
} from 'graphql'

import GraphQLJSON, { GraphQLJSONObject } from 'graphql-type-json'

const schema = new GraphQLSchema({
    query: new GraphQLObjectType({
        name: 'Query',
        fields: {
            testJSON: {
                type: GraphQLJSONObject,
                resolve: () => ({ status: 'ok' }),
            },
            hello: {
                type: GraphQLString,
                resolve: () => 'world',
            },
            ping: {
                type: GraphQLBoolean,
                resolve: () => true,
            },

        },
    })
})

const yoga = createYoga({ schema, graphqlEndpoint: '/api/graphql' })

export default defineEventHandler((event) => {
    const { req, res } = event.node
    return yoga(req, res)
})

[tobiasdiez]

I had similar issues getting a functional graphql server in nuxt and thus developed https://github.com/tobiasdiez/nuxt-graphql-server and https://github.com/apollo-server-integrations/apollo-server-integration-h3.

[jahir9991]

its worked for me.....

// graphqlMiddleware.js

import { createYoga } from "graphql-yoga";
import { makeExecutableSchema } from "@graphql-tools/schema";
export const GraphQLServer = (context) => {
  return createYoga({
    schema: makeExecutableSchema({
      resolvers: [
        {
          Query: {
            users: () => {
              return "hello users!";
            },
          },
        },
      ],
      typeDefs: [
        /* GraphQL */ `
          type Query {
            users: String!
          }
        `,
      ],
    }),
    context,
    graphqlEndpoint: "/graphql",
    landingPage: false,
    multipart: true,
    cors: true,
    logging: "debug",
  });
};

export default defineEventHandler(async (event: any) => {
  if (getRequestURL(event).pathname.startsWith("/graphql")) {
    const { req, res } = event.node;
    return GraphQLServer(event)(req, res);
  }
});