graphql-ts-mode

MELPA

This is a major mode for editing GraphQL documents based on the built in support for tree-sitter in Emacs.

Installation

Requires Emacs 29.1 or later with tree-sitter support. This was developed for the grammar available here.

The installation snippets below add configuration to automatically install the grammar using treesit-install-language-grammar. This requires a working C compiler. Install the grammar before opening a GraphQL file to avoid errors.

From MELPA

This package is available from MELPA.

(use-package graphql-ts-mode
 :ensure t
 :mode ("\\.graphql\\'" "\\.gql\\'")
 :init
 (with-eval-after-load 'treesit
 (add-to-list 'treesit-language-source-alist
 '(graphql "https://github.com/bkegley/tree-sitter-graphql"))))

From source

Clone this repository to ~/.emacs.d/lisp/graphql-ts-mode/ or another path, then configure it like this:

(use-package graphql-ts-mode
 :ensure nil
 :load-path "lisp/graphql-ts-mode/"
 :mode ("\\.graphql\\'" "\\.gql\\'")
 :init
 (with-eval-after-load 'treesit
 (add-to-list 'treesit-language-source-alist
 '(graphql "https://github.com/bkegley/tree-sitter-graphql"))))

Comparison to graphql-mode

There is an existing major mode for GraphQL that does not require tree-sitter, called graphql-mode.

The major differences between graphql-ts-mode and graphql-mode are:

• graphql-mode has features to send actual queries, graphql-ts-mode does not
• graphql-ts-mode should perform better on large files
• graphql-ts-mode has more extensive syntax highlighting