Guides: Visual Studio Code Setup

Introduction

If you use Visual Studio code, the Apollo GraphQL plugin can improve your development experience significantly by enabling a lot of cool features like syntax highlighting for GraphQL, auto completion for GraphQL requests and validating your GraphQL requests against a schema or an endpoint.

This guide helps you configure the Apollo GraphQL plugin with Hasura to make your local development easier.

Install the plugin

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install apollographql.vscode-apollo

Configure your project

Create a file called apollo.config.js in the root of your project and add the following content:

module.exports = {
  client: {
    service: {
      name: 'your-service-name',
      url: 'http://localhost:8080/v1/graphql',
      headers: {
        'x-hasura-admin-secret': '<your-admin-secret>',
      },
    },
  },
};

Notes:

• Replace http://localhost:8080/v1/graphql with your GraphQL endpoint.
• You can also add custom headers in the headers object if you wish to emulate the schema for some specific roles or tokens.

For advanced configuration, check out the docs for the plugin.

Note: The VSCode GraphQL plugin by Prisma does not currently work with Hasura because it has a hard dependency on batching and Hasura does not support batching as of now. Batching as a feature in GraphQL Engine is tracked here.