Variables
Const graphql
graphql: any = graphql<SomeGeneric>`query {user(id: "5", name: boolean) {something}}`
Const queryWithInlineComment
queryWithInlineComment: "#graphqlquery {user(id: "5", name: boolean) {something}}" = `#graphqlquery {user(id: "5", name: boolean) {something}}`
Const queryWithLeadingComment
queryWithLeadingComment: "query {user(id: "5", name: boolean) {something}}" = `query {user(id: "5", name: boolean) {something}}`
GraphQL Syntax Support
Adds full GraphQL syntax highlighting and language support such as bracket matching.
.graphql
/.gql
/.graphqls
highlighting%graphql()
)You'll want to install this if you do not use
graphql-config
, or want to use the highlighting with other extensions thanvscode-graphql
Embedded Language Usage
### Javascript & TypescriptThe 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 reasonsComment-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 extensionMarkdown
backtick code blocks
# Hello Jan ```graphql query MyQuery {} ```
embedded graphql in js & ts codeblocks
simple js/ts
gql
&graphql
template tag expression support inside any backtick codeblocks.# Hello Jan ```js const myQuery = gql` { its { query time } } `; ```
Scala
Using a
graphql
,gql
orschema
string interpolator:Using a comment-delimited pattern:
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
Copyright 2022 GraphQL Contributors