GraphQL Syntax Support

Copied from graphql/graphiql in an attempt to make an npm installable package directly from github, for vscode syntax highlighting to be used in gatsby-remark-vscode.

Original Readme

Adds full GraphQL syntax highlighting and language support such as bracket matching.

Supports .graphql/.gql/.graphqls highlighting
Javascript, Typescript & JSX/TSX & Vue & Svelte
ReasonML/ReScript (%graphql() )
Python
PHP
Markdown

You'll want to install this if you do not use graphql-config, or want to use the highlighting with other extensions than vscode-graphql

Embedded Language Usage

### Javascript & Typescript

The following delimiters are accepted for syntax highlighting. If you are using any of these patterns and they do not work, please open an issue!

Template Literal Expressions

const query = gql`
  {
    id
  }
`;

you can use these template tag literal expressions anywhere you like of course

useFancyGraphQLClient(
  graphql`
    {
      id
    }
  `,
  {
    networkStrategy: '🚀',
  },
);

const query = gql.experimental`{ id }`;

and in typescript, template tag expressions with type arguments

const query = gql<MyType>`
  {
    id
  }
`;

Function Expressions

as well as normal function expressions with template literals

gql(`{ id }`);

graphql(
  `
    {
      id
    }
  `,
);

there is a bug with function expressions with type arguments like these that we need to fix:

gql<MyType>(`{ id }`);

Note, inline "" and '' string literals could also be delimited if needed, but we currently only delimit graphql template strings for obvious reasons

Comment-Delimited patterns

const query = /* GraphQL */ `
  {
    id
  }
`;

const query = `#graphql
 { id }
`;

For full autocompletion, validation and other features, you can install GraphQL.vscode-graphql, which depends on this extension

Markdown

backtick code blocks

# Hello Jan

```graphql
  query MyQuery {}
```

embedded graphql in js & ts codeblocks

simple js/tsgql & graphql template tag expression support inside any backtick codeblocks.

# Hello Jan

```js
string : X = gql`
{
  its {
    query
    time
  }
}
```

Other languages

We actually support other languages than this! just need to extend this readme even further! 🥵

Contributing

Feel free to open a PR to fix, enhance any language support, or even add new languages 😍

see:

Usage Note

We would love for the other graphql extension authors to freely use this syntax extension as well! Even if your extension is designed to replace vscode-graphql, or if it's designed for other other purposes. It uses an MIT license, but attribution is always a nice gesture to the original authors :)

License

MIT License

danielabar/vscode-graphql-syntax