To support language features like completion and "go-to definition" across multiple files,
please include documents in the graphql-config file default or per-project
the path where graphql config looks for config files
graphql-config.load.filePath
null
exact filepath of the config file.
graphql-config.load.configName
graphql
config name prefix instead of graphql
graphql-config.load.legacy
true
backwards compatibility with graphql-config@2
graphql-config.dotEnvPath
null
backwards compatibility with graphql-config@2
vscode-graphql.cacheSchemaFileForLookup
true if schema contains non-SDL files or URLs
generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your schema config are URLs or introspection JSON, or if you have any non-local SDL files in schema
vscode-graphql.schemaCacheTTL
30000
an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a "lazy" form of polling. if you are developing a schema alongside client queries, you may want to decrease this
vscode-graphql.debug
false
show more verbose log output in the output channel
Please refer to the vscode-graphql-syntax reference files (js,ts,svelte,vue) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!
Thanks to apollo for their
graphql-vscode grammars!
We have borrowed from these on several occasions. If you are looking for the
most replete set of vscode grammars for writing your own extension, look no
further!
To initiate the signature process please open a PR against this repo. The
EasyCLA bot will block the merge if we still need a membership agreement from
you.
If your company benefits from GraphQL and you would like to provide essential
financial support for the systems and people that power our community, please
also consider membership in the
GraphQL Foundation.
Changelog | Discord Channel | LSP Server Docs
GraphQL extension for VSCode built with the aim to tightly integrate the GraphQL Ecosystem with VSCode for an awesome developer experience.
.graphql
,.gql
file extension support andgql
/graphql
tagged template literal support for tsx, jsx, ts, jsvscode-graphql-syntax
)Getting Started
To support language features like completion and "go-to definition" across multiple files, please include
documents
in thegraphql-config
file default or per-projectSimplest Config Example
# .graphqlrc.yml or graphql.config.yml schema: 'schema.graphql' documents: 'src/**/*.{graphql,js,ts,jsx,tsx}'
package.json
:// .graphqlrc.ts or graphql.config.ts export default { schema: 'schema.graphql', documents: '**/*.{graphql,js,ts,jsx,tsx}', };
same for .json, .toml, etc
Additional Features
graphql-config
file at root level or in a parent level directory, or apackage.json
file withgraphql
config.graphql
,.gql
files, and detectsgql
,graphql
tags and/** GraphQL */
and#graphql
comments in js, ts, jsx, tsx, vue filesgraphql-config
files with one or multiple projects (multi-root workspaces are not yet supported)Configuration
graphql-config.load.baseDir
graphql-config.load.filePath
null
graphql-config.load.configName
graphql
graphql
graphql-config.load.legacy
true
graphql-config@2
graphql-config.dotEnvPath
null
graphql-config@2
vscode-graphql.cacheSchemaFileForLookup
true
ifschema
contains non-SDL files or URLsschema
config are URLs or introspection JSON, or if you have any non-local SDL files inschema
vscode-graphql.schemaCacheTTL
30000
vscode-graphql.debug
false
Advanced Example
Multi-project can be used for both local files, URL defined schema, or both
import dotenv from 'dotenv'; dotenv.config(); // .graphqlrc.ts or graphql.config.ts export default { projects: { app: { schema: ['src/schema.graphql', 'directives.graphql'], documents: ['**/*.{graphql,js,ts,jsx,tsx}', 'my/fragments.graphql'], }, db: { schema: 'src/generated/db.graphql', documents: ['src/db/**/*.graphql', 'my/fragments.graphql'], extensions: { endpoints: { default: { url: 'https://localhost:3001/graphql/', headers: { Authorization: `Bearer ${process.env.API_TOKEN}`, }, }, }, }, }, }, };
Notice that
documents
key supports glob pattern and hence["**/*.graphql"]
is also valid.Frequently Asked Questions
The extension fails with errors about duplicate types
Your object types must be unique per project (as they must be unique per schema), and your fragment names must also be unique per project.
The extension fails with errors about missing scalars, directives, etc
Make sure that your
schema
pointers refer to a complete schema!In JSX and TSX files I see completion items I don't need
The way vscode lets you filter these out is on the user end
So you'll need to add something like this to your global vscode settings:
My graphql config file is not at the root
Good news, we have configs for this now!
You can search a folder for any of the matching config file names listed above:
Or a specific filepath:
Or a different
configName
that allows different formats:which would search for
./config/.acmerc
,.config/.acmerc.js
,.config/acme.config.json
, etc matching the config paths aboveIf you have multiple projects, you need to define one top-level config that defines all project configs using
projects
How do I enable language features for an embedded graphql string?
Please refer to the
vscode-graphql-syntax
reference files (js,ts,svelte,vue) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!Known Issues
Attribution
Thanks to apollo for their graphql-vscode grammars! We have borrowed from these on several occasions. If you are looking for the most replete set of vscode grammars for writing your own extension, look no further!
Development
This plugin uses the GraphQL language server
yarn
Contributing back to this project
This repository is managed by EasyCLA. Project participants must sign the free (GraphQL Specification Membership agreement) before making a contribution. You only need to do this one time, and it can be signed by individual contributors or their employers.
To initiate the signature process please open a PR against this repo. The EasyCLA bot will block the merge if we still need a membership agreement from you.
You can find detailed information here. If you have issues, please email operations@graphql.org.
If your company benefits from GraphQL and you would like to provide essential financial support for the systems and people that power our community, please also consider membership in the GraphQL Foundation.
License
MIT