https://github.com/oscartbeaumont/vite-plugin-relay

A vite plugin for Relay
https://github.com/oscartbeaumont/vite-plugin-relay

graphql graphql-relay relay typescript vite vite-plugin vite-plugin-relay

Last synced: 15 days ago
JSON representation

A vite plugin for Relay

• Host: GitHub
• URL: https://github.com/oscartbeaumont/vite-plugin-relay
• Owner: oscartbeaumont
• License: mit
• Created: 2021-06-19T19:42:53.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-05T12:00:32.000Z (4 months ago)
• Last Synced: 2024-05-01T16:33:48.544Z (about 2 months ago)
• Topics: graphql, graphql-relay, relay, typescript, vite, vite-plugin, vite-plugin-relay
• Language: TypeScript
• Homepage:
• Size: 683 KB
• Stars: 76
• Watchers: 4
• Forks: 14
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• my-awesome-stars - oscartbeaumont/vite-plugin-relay - A vite plugin for Relay (TypeScript)

README

        
Vite Plugin Relay




  

  [![NPM](https://img.shields.io/npm/v/vite-plugin-relay)](https://www.npmjs.com/package/vite-plugin-relay)

  [![CI workflow](https://github.com/oscartbeaumont/vite-plugin-relay/actions/workflows/ci.yml/badge.svg)](https://github.com/oscartbeaumont/vite-plugin-relay/actions)






    Add relay support to your Vite projects.






❤️ Special thanks to:

- [@Brendonovich](https://github.com/Brendonovich) for general help

- [@kesne](https://github.com/kesne) for adding [pnpm](https://pnpm.io) support

- [@tobias-tengler](https://github.com/tobias-tengler) for adding Vite 3 support

I **do not** actively use this project anymore, however, it will still receive periodic updates.

## Usage

Follow Relay's guide on [how to add Relay to your project](https://relay.dev/docs/getting-started/installation-and-setup/).

> ⚠️ Note: Install `babel-plugin-relay` (>= 13.0.1) as devDependencies as instructed, but skip its configuration. `vite-plugin-relay` will invoke the babel plugin for you!

Add `vite-plugin-relay` to your `devDependencies`:

```bash

yarn add vite-plugin-relay -D

```

Add `vite-plugin-relay` to your Vite configuration (`vite.config.ts` or `vite.config.js`):

```typescript

import { defineConfig } from "vite";

import relay from "vite-plugin-relay";

export default defineConfig({

  plugins: [..., relay],

});

```

Configure `relay-compiler` to output artifacts with `export default` syntax, by setting `eagerEsModules` to `true`:

```json

{

  "relay": {

    "src": "./src",

    "schema": "./src/schema.graphql",

    "language": "typescript",

    "eagerEsModules": true,

    "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"]

  }

}

```

Now your project is setup to use Relay with Vite!

## How this plugin works

Under the hood we are invoking the official `babel-plugin-relay`. This ensures that our plugin and `babel-plugin-relay` do not get out of sync over time and also reduces the maintainance costs of this project.

Since v13 `babel-plugin-relay` automatically gets its configuration from either the `package.json`, `relay.config.js` or `relay.config.json`, so our plugin also doesn't have to expose a configuration API.

## Common Issues

### `Uncaught ReferenceError: global is not defined`

If you experience this error in your browser console when using the plugin add the following define to your `index.html` file before importing your Javascript:

```html

  let global = globalThis;

```

## Server Side Rendering

If you are planning to use this plugin with server side rendering you may need to define `window`. You could do this by putting the following snippet in your [`entry-server.js`](https://vitejs.dev/guide/ssr.html#source-structure) file.

```js

if (typeof (window as any).global === 'undefined') {

  (window as any).global = globalThis;

}

```

## Contributing

```

git clone ...

pnpm i

# If you have never run Playwright run `npx playwright install` to setup your system.

cd examples/vite-3

pnpm dev

pnpm format # Do this before doing a commit

```