babel-plugin-relay

babel-plugin-relay

Relay requires a Babel plugin to convert GraphQL tags to runtime artifacts.

A very simplified example of what this plugin is doing:

// It converts this code
const fragment = graphql`
  fragment User_fragment on User {
    name
  }
`;

// To require generated ASTs for fragments and queries
const fragment = require('__generated__/User_fragment.graphql');

Plugin Configuration

babel-plugin-relay will discover the config if:

• There is a relay.config.json, relay.config.js file at the root of the project (i.e. in the same folder as the package.json file).
• The package.json file contains a "relay" key.

Supported configuration options for babel-plugin-relay

• artifactDirectory A specific directory to output all artifacts to. When enabling this the babel plugin needs artifactDirectory to be set as well. [string]
• eagerEsModules This option enables emitting ES modules artifacts. [boolean][default: false]
• codegenCommand The command to run to compile Relay files. [string]
• isDevVariableName Name of the global variable for dev mode (e.g. __DEV__). [string]
• jsModuleFormat Formatting style for generated files. commonjs or haste. Default is commonjs. [string]

Configuration Instructions

Similar packages

Other packages similar to babel-plugin-relay

graphql-tag

graphql-tag is a package used to parse GraphQL queries into the standard GraphQL AST. Unlike babel-plugin-relay, it does not perform any compilation or optimization of queries, but it is often used in environments where Relay is not required.

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. While it provides similar functionalities in terms of handling GraphQL queries, it is more focused on the Apollo ecosystem rather than Relay.

urql

urql is a GraphQL client that is highly customizable and extensible. It provides a simpler alternative to Relay and Apollo Client, focusing on ease of use and flexibility, but does not offer the same level of query compilation and optimization as babel-plugin-relay.