Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback for “Running an Express GraphQL Server” #1951

Closed
mitchelln11 opened this issue Jan 31, 2025 · 5 comments · Fixed by #1956
Closed

Feedback for “Running an Express GraphQL Server” #1951

mitchelln11 opened this issue Jan 31, 2025 · 5 comments · Fixed by #1956

Comments

@mitchelln11
Copy link

All I'm getting in the browser is this message. Server technically starts, but I just get the error on the front-end.

{"errors":[{"message":"Missing query"}]}

Dependencies are installed. Followed step by step. Same response from the Express and the ruru server for GraphiQL

@benjie
Copy link
Member

benjie commented Feb 3, 2025

It sounds like you need to submit a query; try replacing the query text (the big text box on the left) with {__typename} which is a query valid against every GraphQL schema.

@mitchelln11
Copy link
Author

I don't think I follow. Copying this text, getting the "Running a GraphQL API server at http://localhost:4000/graphql" notice in the terminal, opening that link in a browser, and I get the error above.

Code (exactly from the documentation):

var express = require("express")
var { createHandler } = require("graphql-http/lib/use/express")
var { buildSchema } = require("graphql")
 
// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`)
 
// The root provides a resolver function for each API endpoint
var root = {
  hello() {
    return "Hello world!"
  },
}
 
var app = express()
 
// Create and use the GraphQL handler.
app.all(
  "/graphql",
  createHandler({
    schema: schema,
    rootValue: root,
  })
)
 
// Start the server at port
app.listen(4000)
console.log("Running a GraphQL API server at http://localhost:4000/graphql")

Which part gets replaced? Should I be opening this in another server application like Apollo?

@benjie
Copy link
Member

benjie commented Feb 4, 2025

Ah; thank you for expanding! You are now running a GraphQL API at http://localhost:4000/graphql - but this is an API designed to be queried by computer tools (rather than just visiting it in a web browser). You can spin up ruru (a GraphiQL distribution I wrote) to query the API:

npx ruru@beta -SPe http://localhost:4000/graphql

This will give you the GraphiQL IDE which you can then write GraphQL queries in. (A similar instruction that would also work can be seen in the graphql-http README: https://github.com/graphql/graphql-http#serve-graphiql )

@benjie
Copy link
Member

benjie commented Feb 4, 2025

Now I come to look at the webpage:

https://graphql.org/graphql-js/running-an-express-graphql-server/

I can see how we can improve the content. You followed the instructions, ran the server, and then expected to be able to do something - this is a reasonable expectation! But to actually use the GraphQL you need a GraphQL client, which the tutorial then goes on to talk about. I'll make an edit to that page to clarify - thanks a lot for the feedback!

@benjie
Copy link
Member

benjie commented Feb 4, 2025

Here's a PR to improve the flow in the documentation - thanks again for the feedback @mitchelln11!

#1956

JoviDeCroock pushed a commit to graphql/graphql-js that referenced this issue Feb 5, 2025
See graphql/graphql.github.io#1951

For someone following the tutorial they may well get as far as running
the server (`node server.js`) and then attempt to visit their new API
and get confused because they're met with an error such as
`{"errors":[{"message":"Missing query"}]}`.

This PR adds some joining text to make it clear this is the expected
outcome, and they must read on to get the GraphiQL IDE set up so that
they can write queries.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants