https://github.com/smartvokat/esbuild-plugin-relay

An esbuild plugin to transform tagged GraphQL template literals for Relay.
https://github.com/smartvokat/esbuild-plugin-relay

esbuild graphql relay

Last synced: about 7 hours ago
JSON representation

An esbuild plugin to transform tagged GraphQL template literals for Relay.

• Host: GitHub
• URL: https://github.com/smartvokat/esbuild-plugin-relay
• Owner: smartvokat
• License: mit
• Created: 2021-08-07T21:48:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-01T17:20:11.000Z (almost 2 years ago)
• Last Synced: 2023-03-08T07:33:27.406Z (over 1 year ago)
• Topics: esbuild, graphql, relay
• Language: TypeScript
• Homepage:
• Size: 280 KB
• Stars: 16
• Watchers: 2
• Forks: 4
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# esbuild-plugin-relay

[![Continuous Integration](https://github.com/smartvokat/esbuild-plugin-relay/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/smartvokat/esbuild-plugin-relay/actions/workflows/ci.yaml)

An [esbuild](https://esbuild.github.io/) plugin to transform tagged GraphQL template literals for [Relay](https://relay.dev/). Heavily inspired by [babel-plugin-relay](https://www.npmjs.com/package/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

```sh

# Using NPM

npm install -D esbuild graphql esbuild-plugin-relay

# Using yarn

yarn add -D esbuild graphql esbuild-plugin-relay

```

## Usage

```js

// 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](https://www.npmjs.com/package/babel-plugin-relay).

[The Gist by Samuel Cormier-Iijima](https://gist.github.com/sciyoshi/34e5865f2523848f0d60b4cdd49382ee) was a great starting point.