Nuclide has built-in support for GraphQL using the GraphQL Language Service.

Installing GraphQL

Several server libraries are provided for GraphQL implementation in a wide range of languages.

The GraphQL Language Service needs to know some information about your GraphQL development environment to provide its full feature set. A GraphQL configuration file (.graphqlrc) contains this information. The .graphqlrc file can define multiple configurations for each GraphQL environment, should you have more than one.

Make sure the .graphqlrc file is configured and saved in your project’s top-level directory. For more information on how to configure your .graphqlrc file, refer to the GraphQL Language Service documentation.

Opening a .graphql file in Nuclide will trigger the GraphQL support.

Features

GraphQL’s integration into Nuclide provides you with productivity features such as:

Autocomplete

Nuclide has access to the schema type information in your project when the GraphQL configuration file (.graphqlrc) is defined, so autocomplete just works.

Go to Definition

Nuclide provides a Go to Definition feature for fragments in .graphql files.

For example, if you want to go to the definition of pilotFragment, hover over ...pilotFragment and either press Cmd-<click> or Cmd-Option-Enter. You can also right-click on the fragment, and select Go to Declaration from the pop-up menu.

The cursor will jump to the definition even if it’s in another file.

Outline View

Nuclide’s Outline View allows you to see an outline of a .graphql file’s queries, fragments, fields, etc. at-a-glance so you can navigate quickly.

Context View

Nuclide’s Context View allows you to quickly see and navigate between fragments and their definitions.

Code Diagnostics

Nuclide has code diagnostics that will show lint and validation errors in your .graphql file. You can see the errors in two places, inline within the Editing Area and in the Code Diagnostics pane below.

Hover over the sideways red triangle in the gutter to see the error inline.