davazp / graphql-mode

An Emacs mode for GraphQL

graphql-mode

graphql-mode is an emacs mode to edit GraphQL schema and queries.

Installation

graphql-mode can be installed from MELPA repository at http://melpa.org/.

Once the installation is completed, any file with a .graphql extension will be loaded with this mode.

You can optionally install json-mode, and it will be enabled in the buffer that contains the response from a GraphQL service.

Querying Endpoints

To send a query to a server, you will first need the request package. Then use graphql-send-query (C-c C-c) to send a query.

If you have a .graphqlconfig file, you can select an endpoint configuration with graphql-select-endpoint (C-c C-l).

To send additional headers for a request, graphql-extra-headers must be set. It is automatically set by graphql-select-endpoint, or you can edit its value using JSON with graphql-edit-headers (C-c e h).

graphql-mode's Issues

Simplify .graphqlconfig somehow

I find it highly irritating that GraphQL URLs must be written into the poorly-documented structure of .graphqlconfig, and to make it worse, this file must appear in the same directory that the GraphQL-Mode buffer considers itself to be in (I only use this buffer to write queries I mean to submit to the server). Since the only two things I'm interested in configuring are the URL and the headers, it would be nice if these could be set through Emacs Lisp variables. Then I wouldn't have to have guessed the fact that you don't actually have to supply a .graphql schema file, even though this option appears at a lower depth in the structure and is not marked as an "extension".

The very worst part about it is that if you make a mistake in .graphqlconfig, there's no obvious way to fix it because GraphQL-Mode caches the file. I made a typo in the URL, and GraphQL-Mode just kept using the typo-containing version of the URL even after I fixed it in .graphqlconfig.

Find a good way to submit variables with a GraphQL query

GraphQL queries can contain variables that have to be sent separately. It would be useful to have a way to submit the variable values.

Look at https://github.com/graphql/graphiql for some examples.

Add support for graphql-config

graphql-config seems to be the standard method of providing configuration information about endpoints to tooling. It would be handy if graphql-mode supported reading these files to determine which endpoints to use.

wrong-type-argument integer-or-marker-p nil

Got this error when pressing TAB key:

Debugger entered--Lisp error: (wrong-type-argument integer-or-marker-p nil)
  graphql-beginning-of-query()
  graphql-indent-line()
  indent--funcall-widened(graphql-indent-line)
  indent-for-tab-command(nil)
  funcall-interactively(indent-for-tab-command nil)
  command-execute(indent-for-tab-command)

Add support for HTTP headers

While there's an issue on auth #11, our backend's auth does not work with http basic auth, but instead you need to supply headers. I'd need to supply headers for other reasons, too.

I'm using heavier gql clients right now (e.g. graphql-playground, altair) in order to get that work done, but it would be quite awesome if we could set headers for the requests in some way.

What might be a cool feature is if the headers don't need to be saved in a file or variable, but were editable in a separate, specially named buffer, kind of like it's done in graphql-playground, as quite often, I'll even need to edit the headers.

If that's a feature you'd be interested in adding, I might open a PR, if desired.

Treat underscore as part of word

Hi @davazp

graphql-mode does not treat underscore as part of a word. See the following screenshot:

Is this normal behavior?

Regards

Could I define graphql url in .graphql text file?

Very nice package, on question is that could I define graphql url in .graphql text file,
say just add a line like # graphql_url = "http://127.0.0.1:graphql" directly in the beginning of current file or buffer?

Thanks!

Whitespace-mode support

I have whitespace-mode enabled.

A typical file will look like this

But in graphql-mode, it looks like this

Spaces are themed to a different color somehow. This is happening only in graphql-mode.

org-mode fontification error for graphql src blocks

I use Org mode source blocks quite often, and for source code blocks I set org-src-font-natively to t so that source code blocks within an Org buffer get fontified within the org buffer just like they would within its native mode (e.g, json-mode for json source blocks, c-mode for C source blocks, graphql-mode for GraphQL source blocks).

I've only run into a fontification issue with graphql source blocks and I'm not sure why.

The moment I create a block like this in an org file:

#+BEGIN_SRC graphql

#+END_SRC

I get a message in the minibuffer that says:

org-mode fontification error

and the contents of the source block are not fontified. But if I have a new buffer with graphql-mode as the major mode, the fontification works as expected.

Stable, versioned releases

Please create releases of this project. These should be identifiable, persistent, point-in-time tarballs of the source code files, complete with a changelog entry describing the differences from the previous release, and identified by a sensible version string.

These will appear at https://github.com/davazp/graphql-mode/releases so that stable releases can be found without navigating Git tools or GitHub platform.

Unexpected indentation in Polymode

I work a lot in with ruby, where our tests have a lot of graphql queries written in HEREDOCs. I've written the following polymode definition to allow graphql-mode nested in ruby-mode:

(require 'polymode)
(define-hostmode poly-ruby-hostmode :mode 'ruby-mode)

(define-innermode poly-ruby-gql-metadata-innermode
  :mode 'graphql-mode
  :head-matcher ".*<<[~-]GRAPHQL\n"
  :tail-matcher ".*GRAPHQL\n"
  :head-mode 'host
  :tail-mode 'host)

(define-polymode poly-ruby-mode
  :hostmode 'poly-ruby-hostmode
  :innermodes '(poly-ruby-gql-metadata-innermode))

which allows me to write the following in ruby:

def bla
  blubb = <<~GRAPHQL
  query bla($parent: Int) {
  foo
  bar {
    id
    babar {
      id
      type
    }
  }
  }
  GRAPHQL
end

As you can see the indentation works for all but the first and the last lines. For me the expectation would be that these lines are also indented and every indentation after is relative to this first indentation, like in this buffer that only has graphql-mode active (i.e. no polymode).

query bla($parent: Int) {
  foo
  bar {
    id
    babar {
      id
      type
    }
  }
}

I was able to reproduce the error by defining a polymode for sh-mode, which also supports HEREDOCs

(require 'polymode)
(define-hostmode poly-sh-hostmode :mode 'sh-mode)

(define-innermode poly-sh-gql-metadata-innermode
  :mode 'graphql-mode
  :head-matcher ".*<<[~-]GRAPHQL\n"
  :tail-matcher ".*GRAPHQL\n"
  :head-mode 'host
  :tail-mode 'host)

(define-polymode poly-sh-mode
  :hostmode 'poly-sh-hostmode
  :innermodes '(poly-sh-gql-metadata-innermode))

here's the result:

echo 'this is a sh-mode buffer'

bla=<<-GRAPHQL
  query($parent: Int) {
  foo
  bar {
    id
    babar {
      id
      type
    }
  }
}
GRAPHQL

echo 'no longer in the HEREDOC'

If this really is a graphql-mode issue, I'd be happy to take a look at the code, you just have to point me in the right direction.

Thank you in advance!

Separate graphql querying from qraphql-mode functionality

Hi @davazp
first of all thank you very much for this nice Emacs mode.

I was wondering, what you would think of separating the querying and the editing/displaying part of this package.

Background: I was searching for a simple way of querying a graphql server and found this package. However, I would prefer to only use the querying part that I load from a dedicated .el file and have all the major-mode and (message) related parts in graphql-mode.el file.
Like this the query part could be used in libraries or other programs without pulling in the major-mode.

Add authentication support

1. check to see if graphql server require authentication. if so...
2. ask query sender for username and password, which need to encrypted.
3. send over to graphql server, get the response
4. save the token for future query.

One double-quote character closes a blockstring

It appears that inside a blockstring description, a single " will end the blockstring.
I don't think this is behaving according to spec here https://spec.graphql.org/October2021/#sec-String-Value

Emacs 28.0.90, graphql-mode as of 9740e40 installed via straight-use-package graphql

In this example:

schema {
  query: QueryRoot
  mutation: Mutation
}

type Address {
  "The postal code of the address. This description is a string"
  postalCode: String!
  
  """
  The street name. This description is a blockstring
  """
  street: String!

  """
  The city name. What if I put a single quote " in the blockstring? It ends the blockstring :(
  """
  name: String!
}

... the first two descriptions look fine; the third one, if the highlighting is correct it is ending abruptly after the single ".
Screenshot:

Add support for authentication

I'd like to re-open #11. As a first iteration, graphql-mode could read ~/.authinfo prior to sending a request, check if there is a mapping for the host in question, and if so set the HTTP header Authorization using the basic access authentication as specified by RFC 7617: The 'Basic' HTTP Authentication Scheme.

Performance issues with graphql-mode and Emacs-26.1

I'm having a noticeable lag running any editing command while using graphql-mode. I'm using version 20180303.2358 installed from melpa and Emacs 26.1. My schema file has around 300 lines

Depend on json-mode only optionally

Detect if the mode json-mode is loaded it and use it to display the result, making json-mode not a dependency anymore.

Write basic README.md file with basic instructions

Prettier indentation

Since v1.5 Prettier supports GraphQL formatting.

It would be great to (optionally) indent the GraphQL code with Prettier.

Thank you very much!

Add T-shape window layout

Add T-shape window Layout

1. add T-shape layout similar to the graphiql ui interface
2. keep the user layout if those *GraphQL* or variables.json is already layout-ed.

for example:

Only Save URL if query succeeded

Hi @davazp,

Thanks for developing graphql-mode 👍 I have a minor suggestion, would it be possible to cache the URL only if the query is correct?

For instance, suppose that I have a valid query, I hit C-c C-c but the URL I insert is malformed. Now I have to re-load graphql-mode in order to re-insert a correct URL.

What do you think?

Thanks,
Andrea

support newer (v3) graphql-config file formats

Currently, graphql-mode only looks for a single .graphqlconfig file. While this works okay, other editors/plugins such as IntelliJ etc will recommend upgrading to the v3 file format, as per these migration notes. Any project that has upgraded to the v3 file format will cease to work with graphql-mode and show the Could not find a .graphqlconfig file error message.

The (backward-incompatible) v3 file lookup allows for any of the following:

graphql.config.json
graphql.config.js
graphql.config.cjs
graphql.config.ts
graphql.config.toml
graphql.config.yaml
graphql.config.yml
.graphqlrc (YAML and JSON)
.graphqlrc.json
.graphqlrc.toml
.graphqlrc.yaml
.graphqlrc.yml
.graphqlrc.js
.graphqlrc.ts
graphql property in package.json

I don't think the graphql-mode package needs to support all of the above, but at least the json and yaml versions should be supported.

indent region doesn't work

when selecting text and press tab to indent region. Got this error:

Debugger entered--Lisp error: (wrong-type-argument integer-or-marker-p nil)
  graphql-beginning-of-query()
  graphql-indent-line()
  indent-according-to-mode()
  indent-region-line-by-line(1 155)
  indent-region(1 155)
  indent-for-tab-command(nil)
  funcall-interactively(indent-for-tab-command nil)
  command-execute(indent-for-tab-command)

Support field autocompletion by GraphQL introspection

Using GraphQL introspection we can get the fields, what could be used to autocomplete the fields at point.

graphql-send-query query freezes Emacs

for some reason my requests never finish making Emacs freeze for long periods of time, I have to use C-g to regain control.

This is the backtrace:

Debugger entered--Lisp error: (quit)
  request--curl-sync("https://gitlab.com/api/graphql" :type "POST" :data "{\"variables\":{\"currentGroup\":\"space-empire\"},\"query\":\"query {\\n  group(fullPath: $current) {\\n    id\\n    name\\n  }\\n}\\n\"}" :headers (("Content-Type" . "application/json")) :parser json-read :sync t :complete #f(compiled-function (&rest _) #<bytecode 0x156e48541ef9>) :error #f(compiled-function (&rest args2) #<bytecode 0x156e48542305>) :url "https://gitlab.com/api/graphql" :response #s(request-response :status-code nil :history nil :data nil :error-thrown nil :symbol-status nil :url "https://gitlab.com/api/graphql" :done-p nil :settings (:type "POST" :data "{\"variables\":{\"currentGroup\":\"space-empire\"},\"quer..." :headers (("Content-Type" . "application/json")) :parser json-read :sync t :complete #f(compiled-function (&rest _) #<bytecode 0x156e48541ef9>) :error #f(compiled-function (&rest args2) #<bytecode 0x156e48542305>) :url "https://gitlab.com/api/graphql" :response #19 :encoding utf-8) :-buffer #<buffer  *request curl*> :-raw-header nil :-timer nil :-backend curl :-tempfiles ("/tmp/emacs-requestrZtD9p")) :encoding utf-8)
  apply(request--curl-sync "https://gitlab.com/api/graphql" (:type "POST" :data "{\"variables\":{\"currentGroup\":\"space-empire\"},\"query\":\"query {\\n  group(fullPath: $current) {\\n    id\\n    name\\n  }\\n}\\n\"}" :headers (("Content-Type" . "application/json")) :parser json-read :sync t :complete #f(compiled-function (&rest _) #<bytecode 0x156e48541ef9>) :error #f(compiled-function (&rest args2) #<bytecode 0x156e48542305>) :url "https://gitlab.com/api/graphql" :response #s(request-response :status-code nil :history nil :data nil :error-thrown nil :symbol-status nil :url "https://gitlab.com/api/graphql" :done-p nil :settings #3 :-buffer #<buffer  *request curl*> :-raw-header nil :-timer nil :-backend curl :-tempfiles ("/tmp/emacs-requestrZtD9p")) :encoding utf-8))
  request("https://gitlab.com/api/graphql" :type "POST" :data "{\"variables\":{\"currentGroup\":\"space-empire\"},\"query\":\"query {\\n  group(fullPath: $current) {\\n    id\\n    name\\n  }\\n}\\n\"}" :headers (("Content-Type" . "application/json")) :parser json-read :sync t :complete #f(compiled-function (&rest _) #<bytecode 0x156e48541ef9>))
  graphql-post-request("https://gitlab.com/api/graphql" "query {\n  group(fullPath: $current) {\n    id\n    name\n  }\n}\n" "" ((currentGroup . "space-empire")))
  graphql--query("query {\n  group(fullPath: $current) {\n    id\n    name\n  }\n}\n" "" ((currentGroup . "space-empire")))
  graphql-send-query()
  funcall-interactively(graphql-send-query)
  call-interactively(graphql-send-query nil nil)
  command-execute(graphql-send-query)

Implement testing with ERT

Org-mode Babel Support for graphql execution

It would be useful to be able to use graphql mode within org files. Such that, given a source block like this:

#+BEGIN_SRC graphql :endpoint my-first-great-endpoint
mutation {
  createFoo() {}
}
#+END_SRC

I can then execute that block and produce results inline, as per other org-babel language integrations.

There are some things to think about

• endpoint select in header arguments
• passing grapgql variables in, also through header args maybe

Support for eldoc in field arguments

Using GraphQL introspection we can get the field parameters and integrate graphql-mode with eldoc-mode.