graphql-http Missing query

Question

Followed steps by steps just trying to integrate graphql from provided documentation of expressjs, https://github.com/graphql/graphql-http#with-express

import express from 'express'; // yarn add express
import { createHandler } from 'graphql-http/lib/use/express';
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql';


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


const app = express();

app.use(
    '/graphql',
    createHandler({ schema:schema,graphiql:true}),
  )

I am not getting UI interface to run query just getting following response

{"errors":[{"message":"Missing query"}]} 400 Bed Request

Get UI to play query strig or something to implement new query strings / APIs

Lin Du · Answer 1 · 2023-07-21T06:17:18.003

graphql-http package does not provide an out-of-a-box GraphqQL Playground UI. There is no graphiql option for the createHandler function.

Only GraphQL over HTTP and this issue

This is the official GraphQL over HTTP spec reference implementation and as such follows the specification strictly without any additional features (like playgrounds or GUIs, file uploads, @stream/@defer directives and subscriptions).

You can use graphql-playground-middleware-express to expose an endpoint for the GraphQL Playground.

E.g.

const express = require('express');
const { createHandler } = require('graphql-http/lib/use/express');
const expressPlayground =
  require('graphql-playground-middleware-express').default;
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');

/**
 * Construct a GraphQL schema and define the necessary resolvers.
 *
 * type Query {
 *   hello: String
 * }
 */
const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      hello: {
        type: GraphQLString,
        resolve: () => 'world',
      },
    },
  }),
});

const app = express();

app.all('/graphql', createHandler({ schema }));
app.get('/playground', expressPlayground({ endpoint: '/graphql' }));

app.listen(4000, () => console.log('Server is running on PORT 4000...'));

Access https://so76735343-0n0m--4000--c53ab388.local-corp.webcontainer.io/playground endpoint, you will see GraphQL playground UI.

stackblitz

score 0 · Answer 2 · answered Jul 31 '23 at 11:23

If you want to work with GraphQL UI, I recommend using Apollo Server's standalone web server. For more informations.

Standalone web server is easy to set up. Generate typeDefs and resolvers and then build the server.

You can use the code below.

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

// types and resolvers
import { typeDefs, resolvers } from "./schema.js";

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`  Server ready at: ${url}`);

But if you want to work with web integrations, you can use Apollo Server integrations. For example, you can use expressMiddleware for Express framework. But you won't see an UI, you have to create request with applications like postman or insomnia etc.

graphql-http Missing query

2 Answers2