Graphql-engine: Use with VSCode-graphql

[Jayphen]

I am trying to use https://github.com/prismagraphql/vscode-graphql for Intellisense autocompletion/in-editor queries etc.

When executing a query using the extension, I get the following error:

Error: Network error: When parsing the constructor GraphQLRequest of type Hasura.GraphQL.Transport.HTTP.Protocol.GraphQLRequest expected Object but got Array.

My .graphqlconfig looks like this:

{
  "projects": {
    "Faberge": {
      "schemaPath": "./schema.graphql",
      "extensions": {
        "endpoints": {
          "default": "http://localhost:8080/v1alpha1/graphql"
        }
      }
    }
  }
}

Is there something more I need to do in order to get the correct response ?

[coco98]

@wawhal Have you tried this out with vscode?

[buzinas]

@Jayphen I know you asked specifically about stpn.vscode-graphql, but I use apollographql.vscode-apollo, and it works like a charm for me. This is my apollo.config.js file:

module.exports = {
  client: {
    service: {
      name: 'your-project-name',
      url: 'http://localhost:8080/v1alpha1/graphql',
    },
    includes: ['**/queries/**/*.{gql,graphql}'], // change this to your pattern
  },
}

PS: you don't need to use Apollo in your project to take advantage of its VS Code extension.

[Jayphen]

Actually, the extension I was talking about was this one https://github.com/prismagraphql/vscode-graphql. I accidentally posted the wrong link! (I've now updated the original post). The intellisense does work as intended in .gql or .graphql files (that's unrelated to Hasura - it just autocompletes from the static schema)

However, if you attempt to execute the query, it will fail with the error I mentioned above.

[shahidhk]

@Jayphen What do you mean by execute? You can run the query against the server from VSCode?

[Jayphen]

Yes, the extension adds an 'execute query' CodeLens link/button: https://github.com/prisma/vscode-graphql/pull/77

However the response from Hasura seems to be something other than what it is expecting. When it should show the response it instead gives the error

Error: Network error: When parsing the constructor GraphQLRequest of type Hasura.GraphQL.Transport.HTTP.Protocol.GraphQLRequest expected Object but got Array.

[wawhal]

I am able to replicate this.
Investigating the problem.

[shahidhk]

An integration guide for VSCode is added at https://docs.hasura.io/1.0/graphql/manual/guides/code-editor-integrations/visual-studio-code.html