0

I'm experimenting with building a GraphQL server and I'm trying to use the GraphiQL Chrome extension to play with it.

As soon as I set the endpoint to my server, http://localhost:3000/graphql, GraphiQL sends an empty query:

Request URL:http://localhost:3000/graphql
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3000
Referrer Policy:no-referrer-when-downgrade

I made it return an empty response, but then, I get this JavaScript error in Chrome:

react.min.js:14 Uncaught TypeError: Cannot read property 'length' of undefined
    at GraphiQL.autoCompleteLeafs (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/graphiql/graphiql.js:1060:33)
    at GraphiQL._runEditorQuery (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/graphiql/graphiql.js:1131:13)
    at Object.r (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:14:10134)
    at i (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:12:21911)
    at Object.u [as executeDispatchesInOrder] (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:12:22122)
    at p (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:12:18475)
    at f (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:12:18601)
    at Array.forEach (native)
    at r (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:15:26156)
    at Object.processEventQueue (chrome-extension://fkkiamalmpiidkljmicmjfbieiclmeij/ext/react.min.js:12:19721)


After that, GraphiQL doesn't work at all. I can type any query, click the play button and all it does is repeat the error:

enter image description here ​ What am I missing? Is GraphiQL expecting some sort of schema from a blank query?

Pablo Fernandez
  • 279,434
  • 135
  • 377
  • 622

1 Answers1

1

I believe GraphiQL chrome extension requires an object response from the API. Try returning a blank object on emtpy requests to see if that solves it for you.

Looking at https://launchpad.graphql.com (which also uses GraphiQL) when submitting a blank request I get the following object back:

{
  "code": 400,
  "error": "Script returned an error.",
  "details": "No query was provided in request body."
}

That is a descriptive response that you can use for debugging.