[Gatsby] Network error: POST body sent invalid JSON

[azdanov]

Actual Behavior

When running Execute Query VSCode action inside a Gatsby project this error occurs.

Expected Behavior

Expect to recieve results. As in http://localhost:8000/___graphql.

Steps to Reproduce the Problem Or Description

1. Install a default gatsby project gatsby new test. Gatsby Quickstart.
2. Setup .graphqlconfig.yaml with graphql init. For Endpoint URL use http://localhost:8000/___graphql
3. Open src/components/layout.js and run Execute Query action.

Specifications

• GraphQL for VSCode Extension Version: 0.1.6
• VSCode Version: 1.29.1
• OS Name: MacOS
• OS Version: 10.14.1 (18B75)

Logs Of TS Server || GraphQL Language Service

Null.

Meta

As a sidenote executing graphql get-schema creates a correct schema.

The generated .graphqlconfig.yaml.

projects:
  testing:
    schemaPath: schema.graphql
    extensions:
      endpoints:
        dev: 'http://localhost:8000/___graphql'

[azdanov]

Possibly related: https://github.com/graphql-cli/graphql-cli/pull/352

[divyenduz]

@azdanov : Thanks, I have never tried this extension with a gatsby project. Would it be possible for you to provide a minimal reproduction of the issue in form of a Github project? Thanks!

[azdanov]

@divyenduz Sure.

https://github.com/azdanov/vscode-graphql

Inside src/components/layout.js there is a simple test query. Which works fine from http://localhost:8000/___graphql GraphiQL.

Configuration should be right for .graphqlconfig. Other development url http://localhost:8000 doesn't seem to work at all.

I guess that gatsby wraps the response in some weird way. I've had issues with other CLI tools that require an endpoint to query. 🤷‍♂️

[cmckni3]

Running into this same issue with this vs code extension. I am using an express backend and have apollo, graphql, and graphql.macro installed in the React app.

graphql query my-query.graphql works perfectly though.

[cmckni3]

In my case, my server doesn't support batching but vscode-graphql uses http-link-dataloader that batches queries. For some reason, the single query in my .graphql file is batched and sent as an array.

I used the following proxy code to verify what was sent to the server.

var proxy = require('express-http-proxy');
var app = require('express')();

app.use(proxy('localhost:8080', {
  proxyReqBodyDecorator: function (bodyContent, srcReq) {
    var bodyData = bodyContent.toString('utf8');
    console.log('request headers', srcReq.headers);
    console.log('request body', JSON.stringify(JSON.parse(bodyData), true, 2));
    return bodyContent;
  },
  userResDecorator: function (proxyRes, proxyResData, userReq, userRes) {
    var data = proxyResData.toString('utf8');
    console.log('response headers', proxyRes.headers);
    console.log('response body', JSON.stringify(JSON.parse(data), true, 2));
    return JSON.stringify(JSON.parse(data));
  }
}));

app.listen(8000);

[brandonkal]

I can confirm that the issue is that vscode-graphql is batching single queries into an array. This breaks things with the Gatsby dev server. Hopefully this unnecessary batching can be removed.

Off topic but I must ask: @azdanov what is the font and theme are you using there in VSCode in that screenshot above? I really like it!

[azdanov]

@brandonkal It's Material Theme with Material Theme Icons.

[brandonkal]

Thank you @azdanov. The color scheme does look quite nice with Javascript because of the red tone. Though in Go, everything is close to white. I am using One Dark Pro which is quite similar though the contrast is difficult in direct sunlight.

Back to the issue, I don't see a case where "Execute Query" would execute multiple queries and that doesn't seem standard so I am hoping the extension will switch to just sending the query instead of wrapping it.

[divyenduz]

This is fixed in 0.1.8