esbuild-plugin-relay

An esbuild plugin to transform tagged GraphQL template literals for Relay. Heavily inspired by babel-plugin-relay.

Features

• Replaces graphql tagged template literals with imports to the artifacts generated by relay-compiler
• Supports CommonJS and ESM module formats
• Supports TypeScript projects
• Optionally warns you about outdated operations and fragments

Caveat

This plugin uses string replacements and does not parse the source code. This means it will try to compile GraphQL literals even if they are commented out. If that does not fit your workflow, you'll need to use esbuild + babel + babel-plugin-relay.

Installation

# Using NPM
npm install -D esbuild graphql esbuild-plugin-relay

# Using yarn
yarn add -D esbuild graphql esbuild-plugin-relay

Usage

// esbuild.config.js
import esbuild from "esbuild";
import relay from "esbuild-plugin-relay";

esbuild.build({
  // ...other options,
  plugins: [relay()],
});

Acknowledgements

This plugin is based on the official babel-plugin-relay.

The Gist by Samuel Cormier-Iijima was a great starting point.