Webiny-js: GraphQL Playground failed to work on development env

[khayong]

Received this error when access the endpoint http://localhost:9100/function/api on browser.

(node:5304) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token < in JSON at position 3
    at JSON.parse (<anonymous>)
    at handler.(anonymous function) (/Users/khayong/workspace/tupperwareplus/packages/api/.webpack/service/src/webpack:/Users/khayong/workspace/tupperwareplus/node_modules/webiny-api/lambda/lambda.js:127:1)
    at Object.default (/Users/khayong/workspace/tupperwareplus/packages/api/.webpack/service/src/webpack:/Users/khayong/workspace/tupperwareplus/node_modules/apollo-server-lambda/dist/ApolloServer.js:89:1)
    at Promise (/Users/khayong/workspace/tupperwareplus/packages/api/.webpack/service/src/webpack:/Users/khayong/workspace/tupperwareplus/node_modules/webiny-api/lambda/lambda.js:121:1)
    at process._tickCallback (internal/process/next_tick.js:68:7)

From the below snippet from file webiny-js/packages/webiny-api/src/lambda/lambda.js, it was intentionally force to parse all output into json. Is there any reason?

if (process.env.NODE_ENV === "development") {
  data.body = JSON.stringify(JSON.parse(data.body), null, 2);
}

https://www.apollographql.com/docs/apollo-server/whats-new.html#GraphQL-Playground

Apollo Server 2.0 creates a single GraphQL endpoint that provides data and a GUI explorer depending on how the endpoint is accessed. In browser, Apollo Server returns GraphQL playground. For other cases, Apollo Server returns the data for GraphQL requests from other clients, such as Apollo Client, curl, Postman, or Insomnia.

[Pavel910]

Hi @khayong, in development we want to beautify all the output for readability in the Dev Tools, nothing more.
Besides, we only want to use API for JSON data, so it never was a problem for us.

Do you mind sharing with me how did you setup the local environment for development?
Just wondering, because we never explained how to setup our repo for development, so maybe you are missing something.

[Pavel910]

@khayong Ok I see you did it via webiny-cli, can you post the response you are trying to send through?

[doitadrian]

To me, this looks like there's an error on the API side (http://localhost:9100/function/api).

As @Pavel910 mentioned, can you send us the response you're receiving?

Thanks!

[khayong]

I was referring to this guide.
https://docs.webiny.com/docs/developer-tutorials/local-setup#begin-development
I tried to avoid to install any additional tools to introspect the schema. As Webiny is backed by Apollo Server 2.0, we should be able to access the schema directly from browser.

In that case, could you have additional checking with the content type application/json? So that it could output Playground in html. The code would be something like

if (process.env.NODE_ENV === "development" && data.headers['Content-Type'] === 'application/json') {
  data.body = JSON.stringify(JSON.parse(data.body), null, 2);
}

Thanks!

[doitadrian]

Hey @khayong,

We understand now, this will be ready for the next release for sure.

Thanks for the report!

[Pavel910]

This is fixed and released! 🍻