graphql-language-service

What is graphql-language-service?

The graphql-language-service npm package provides a set of tools and utilities for working with GraphQL language features. It includes functionalities such as parsing, validation, and autocompletion, which are essential for building GraphQL development tools and editors.

What are graphql-language-service's main functionalities?

Parsing

This feature allows you to parse a GraphQL query string into an Abstract Syntax Tree (AST). The AST can then be used for further analysis or transformation.

const { parse } = require('graphql-language-service-parser');
const query = `query { user(id: 1) { name } }`;
const ast = parse(query);
console.log(JSON.stringify(ast, null, 2));

Validation

This feature allows you to validate a GraphQL query against a schema. It helps in identifying errors and ensuring that the query adheres to the schema's rules.

const { validate } = require('graphql');
const { parse } = require('graphql-language-service-parser');
const { specifiedRules } = require('graphql-language-service');
const schema = /* GraphQLSchema object */;
const query = `query { user(id: 1) { name } }`;
const ast = parse(query);
const errors = validate(schema, ast, specifiedRules);
console.log(errors);

Autocomplete

This feature provides autocompletion suggestions for a given position in a GraphQL query. It is useful for building IDE extensions and other developer tools that enhance the GraphQL development experience.

const { getAutocompleteSuggestions } = require('graphql-language-service-interface');
const schema = /* GraphQLSchema object */;
const query = `query { user(`;
const position = { line: 0, character: 12 };
const suggestions = getAutocompleteSuggestions(schema, query, position);
console.log(suggestions);

Other packages similar to graphql-language-service

graphql

The 'graphql' package is the reference implementation of GraphQL for JavaScript. It provides a complete suite of tools for building GraphQL servers and clients, including parsing, validation, and execution. While it offers similar functionalities to 'graphql-language-service', it is more focused on server-side operations and less on language services for development tools.

codemirror-graphql

The 'codemirror-graphql' package provides a set of CodeMirror modes and utilities for working with GraphQL. It includes features like syntax highlighting, linting, and autocompletion. Compared to 'graphql-language-service', it is more focused on integrating GraphQL capabilities into the CodeMirror editor.

README

GraphQL Language Service

This is currently in technical preview. We welcome your feedback and suggestions.

GraphQL Language Service provides an interface for building GraphQL language services for IDEs.

Partial support for Microsoft's Language Server Protocol is in place, with more to come in the future.

Currently supported features include:

• Diagnostics (GraphQL syntax linting/validations) (spec-compliant)
• Autocomplete suggestions (spec-compliant)
• Hyperlink to fragment definitions (spec-compliant)
• Outline view support for queries

Installation and Usage

Dependencies

GraphQL Language Service depends on Watchman running on your machine. Follow this installation guide to install Watchman.

Installation

git clone [e-mail]:graphql/graphql-language-service.git
cd {path/to/your/repo}
npm install ../graphql-language-service

After pulling the latest changes from this repo, be sure to run npm run build to transform the src/ directory and generate the dist/ directory.

The library includes a node executable file which you can find in ./node_modules/.bin/graphql.js after installation.

GraphQL configuration file (.graphqlrc)

GraphQL Language Service, to provide its full feature set, will need to know some information about your GraphQL development environment. .graphqlrc is a GraphQL configuration file that contains this information.

{
  "build-configs": {
    "product-name": {
      "input-dirs": [
        "/dir/paths/to/your/graphql/files"
      ],
      "exclude-dirs": [
        "/dir/paths/to/ignore/"
      ],
      "schema-path": "/path/to/the/schema/" // supports `.graphql` IDL or `.json` file
    }
  }
}

.graphqlrc can define mutliple configurations for each GraphQL environment, should you have more than one.

The GraphQL configurations will be used to perform two things in a nutshell:

1. Using input-dirs and exclude-dirs, cache all fragment definitions per each product. This information will be used to compute dependencies between GraphQL queries and fragments.
2. Using schema-path, build and cache GraphQLSchemas (per product). The schema will be used to perform query validations, autocomplete suggestions etc.

Also, if GraphQL Language Service receives an RPC message that contains the path of the file being operated on, input-dirs and exclude-dirs are used to determine which product configuration the file is associated with. Refer to GraphQLConfig class for more information.

Using the command-line interface

The node executable contains several commands: server and a command-line language service methods (lint, autocomplete, outline).

Improving this list is a work-in-progress.

GraphQL Language Service Command-Line Interface.
Usage: bin/graphql.js <command> <file>
    [-h | --help]
    [-c | --configDir] {configDir}
    [-t | --text] {textBuffer}
    [-f | --file] {filePath}
    [-s | --schema] {schemaPath}


Options:
  -h, --help        Show help                                          [boolean]
  -t, --text        Text buffer to perform GraphQL diagnostics on.
                    Will defer to --file option if omitted.
                    Overrides the --file option, if any.
                                                                        [string]
  -f, --file        File path to perform GraphQL diagnostics on.
                    Will be ignored if --text option is supplied.
                                                                        [string]
  --row             A row number from the cursor location for GraphQL
                    autocomplete suggestions.
                    If omitted, the last row number will be used.
                                                                        [number]
  --column          A column number from the cursor location for GraphQL
                    autocomplete suggestions.
                    If omitted, the last column number will be used.
                                                                        [number]
  -c, --configDir   Path to the .graphqlrc configuration file.
                    Walks up the directory tree from the provided config
                    directory, or the current working directory, until a
                    .graphqlrc is found or the root directory is found.
                                                                        [string]
  -s, --schemaPath  a path to schema DSL file
                                                                        [string]

At least one command is required.
Commands: "server, validate, autocomplete, outline"

Architectural Overview

GraphQL Language Service currently communicates via Stream transport with the IDE server. GraphQL server will receive/send RPC messages to perform language service features, while caching the necessary GraphQL artifacts such as fragment definitions, GraphQL schemas etc. More about the server interface and RPC message format below.

The IDE server should launch a separate GraphQL server with its own child process for each .graphqlrc file the IDE finds (using the nearest ancestor directory relative to the file currently being edited):

./application

  ./productA
    .graphqlrc
    ProductAQuery.graphql
    ProductASchema.graphql

  ./productB
    .graphqlrc
    ProductBQuery.graphql
    ProductBSchema.graphql

A separate GraphQL server should be instantiated for ProductA and ProductB, each with its own .graphqlrc file, as illustrated in the directory structure above.

The IDE server should manage the lifecycle of the GraphQL server. Ideally, the IDE server should spawn a child process for each of the GraphQL Language Service processes necessary, and gracefully exit the processes as the IDE closes. In case of errors or a sudden halt the GraphQL Language Service will close as the stream from the IDE closes.

Server Interface

GraphQL Language Server uses JSON-RPC to communicate with the IDE servers. Microsoft's language server currently supports two communication transports: Stream (stdio) and IPC. For IPC transport, the reference guide to be used for development is the language server protocol documentation.

For each transport, there is a slight difference in JSON message format, especially in how the methods to be invoked are defined - below are the currently supported methods for each transport (will be updated as progress is made):

	Stream	IPC
Diagnostics	getDiagnostics	textDocument/publishDiagnostics
Autocompletion	getAutocompleteSuggestions	textDocument/completion
Outline	getOutline	Not supported yet
Go-to definition	getDefinition	Not supported yet
File Events	Not supported yet	didOpen/didClose/didSave/didChange events