Hi,
Would it be possible to use this plugin in a monorepo setup ?
Where we had an App containing graphql + Packages containing graphql ?
Regards

Hello, how I can use this plugin with Vitest Workspaces?

One issue I'm facing is reading the relay configuration located in each workspace. Currently the plugin reads the configuration from the current directory and not from the workspace directory.

I want it to read the configuration in /packages/abc/relay.config.js instead of /relay.config.js when running the vitest command in the root directory.

One idea would be to allow you to submit Relay settings directly to this plugin via Javascript.

currently I have:

  "scripts": {
    "dev": "pnpm relay && vite",
    "build": "pnpm relay && tsc && vite build",
    "preview": "vite preview",
    "relay": "relay-compiler"
  },

in my package.json.

I was hoping that I could just have something more like:

  "scripts": {
-    "dev": "pnpm relay && vite",
+    "dev": "vite",
-    "build": "pnpm relay && tsc && vite build",
+    "build": "tsc && vite build",
    "preview": "vite preview",
    "relay": "relay-compiler"
  },

by using this plugin, but maybe I am not understanding this plugin's usecase.

  config: () => ({
    define: {
      global: "globalThis",
    },
  }),

breaks imports that have the word global in them. E.g: jss-plugin-global

Add a config option to the plugin to opt out of this behaviour or just remove it.

The docs have also been updated to recommend against placing global inside define

For anyone else encounrting this issue you can use this workaround

import type { Plugin } from "vite";

const viteRelayFix = {
  name: "vite:relay-fix",
  config: (cfg) => {
    delete cfg.define.global;
    return cfg;
  },
} as Plugin;

Thanks
Ciaran

I tried using your plugin to have Storybook with the Vite builder, but wasn't able to and had to resort to doing something similar.

I found this GitHub gist from @sciyoshi, which works well when using esbuild as the bundler, but as Vite uses esbuild + rollup, I had to modify it to make it a Rollup plugin.

Here's my code:

import crypto from 'crypto'; // node default crypto (no need to install)
import { parse } from 'graphql'; // can be a pure dependency or peer dependency

const relay = {
  name: 'vite:relay',
  config: () => ({
    define: {
      global: 'globalThis',
    },
  }),
  async transform(src, id) {
    let code = src;
    if (/.(t|j)sx?$/.test(id) && src.includes('graphql`')) {
      const imports = [];

      code = code.replace(/graphql`([\s\S]*?)`/gm, (_, query) => {
        const operationName = parse(query).definitions[0]?.name?.value;
        if (!operationName) throw new Error(`Incorrect GraphQL operation in ${id}`);

        let id = `graphql__${crypto.randomBytes(10).toString('hex')}`;
        imports.push(
          `import ${id} from "@cercle/common/relay/__generated__/${operationName}.graphql.ts";`
        );
        return id;
      });
      code = imports.join('\n') + code;
    }

    return {
      code,
      map: null,
    };
  },
};

This is also slightly faster as it doesn't have the overhead that babel transform has.

Hi. I'm trying to use vite-plugin-relay on a project that uses src as the root, and uses tsconfig paths for absolute imports.

vitest.config.ts

import react from "@vitejs/plugin-react"
import tsconfigPaths from "vite-tsconfig-paths"
import { defineConfig } from "vitest/config"
import relay from "vite-plugin-relay"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), relay],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./__tests__/setupVitestTests.ts"]
  },
  root: "src",
})

relay.config.js

module.exports = {
  src: "./src",
  schema: "./schema.graphql",
  schemaExtensions: ["./src"],
  exclude: [
    "**/__generated__/**",
    "**/__mocks__/**",
    "**/node_modules/**",
    "src/.next/**",
  ],
  language: "typescript",
  eagerEsModules: true,
  artifactDirectory: "./src/lib/graphql/__generated__",
}

tsconfig paths:

"paths": {
   "@/*": ["./*"]
}

Imports:

import { CollectionWatchlistButtonTestQuery } from "@/lib/graphql/__generated__/CollectionWatchlistButtonTestQuery.graphql"

When trying to run tests, vitest fails to find generated modules:

I was trying to get this plugin up and running in my own project but bumped into the following error ReferenceError: global is not defined. So then the exploration started: I've checked out this repo and tried to boot the example app and I got the same error.

It happens only when running the dev server, the production build goes just fine. Therefore, the end-to-end tests are not failing. I could "fix" it by changing the vite.config.ts content with:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import relay from "vite-plugin-relay";

export default defineConfig({
  define: {
    global: {
      global: 'globalThis'
    }
  },
  plugins: [reactRefresh(), relay],
});

but actually I have no idea why that works. I've noticed that something similar has been changed in #152 but I'm not too much into this to completely oversee the impact.

RelayReferenceMarker.js:333 Uncaught ReferenceError: global is not defined
    at node_modules/relay-runtime/lib/store/RelayPublishQueue.js (RelayReferenceMarker.js:333)
    at __require2 (chunk-ENMAWK7U.js?v=1254bb04:36)
    at node_modules/relay-runtime/lib/store/RelayModernEnvironment.js (RelayModernStore.js:652)
    at __require2 (chunk-ENMAWK7U.js?v=1254bb04:36)
    at node_modules/relay-runtime/lib/index.js (index.js:10)
    at __require2 (chunk-ENMAWK7U.js?v=1254bb04:36)
    at node_modules/relay-runtime/index.js (index.js:10)
    at __require2 (chunk-ENMAWK7U.js?v=1254bb04:36)
    at node_modules/react-relay/lib/ReactRelayContext.js (ReactRelayContext.js:15)
    at __require2 (chunk-ENMAWK7U.js?v=1254bb04:36)

babel-plugin-relay v15 is available, but this library depends on v14.

ABC@workspace:. provides babel-plugin-relay@npm:15.0.0 with version 15.0.0, which doesn't satisfy the following requirements:
➤ YN0000: vite-plugin-relay@npm:2.0.0 [f5404] → ^14.1.0 ✘

Is it possible to upgrade this plugin to use v15? Is there another way to remove this warning from yarn?

relay-compiler and babel-plugin-relay have an artifactDirectory config option to control the location of the generated files. The babel plugin and the relay-compiler config need to have the same location configure to work correctly. Currently this plugin doesn't expose a mechanism for configuring this so users cannot use this option in the relay compiler.

Hello. I followed the getting started instructions to get up and running with the plugin. Unfortunately, things aren't working as expected.

Here is my vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import relay from 'vite-plugin-relay'
export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [react(), relay],
});

The order of the plugins does not seem to matter. And here's my graphql query:

import {graphql} from "relay-runtime";
const getUserQuery = graphql`
  query GetUserQuery($input: GetRequest!) {
    getUser(input: $input) {
      id
    }
  }
`
export default getUserQuery;

Unfortunately, this results in the following error

Uncaught Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `graphql`. Note also that there cannot be a space between graphql and the backtick that follows.
    at invariant (http://localhost:3000/node_modules/.vite/deps/chunk-HCDSWF2A.js?v=97bd1526:224:19)
    at graphql (http://localhost:3000/node_modules/.vite/deps/chunk-HCDSWF2A.js?v=97bd1526:1176:21)
    at http://localhost:3000/src/queries/LoginMutation.ts?t=1660257715549:2:30

Which leads me to believe that the plugin isn't running. How can I configure the plugin to run the babel transformation?

In order to avoid having this issue when using Relay 13: facebook/relay#3437 we would need to upgrade the babel-plugin-relay to ^13.0.0.

Before I sent you a PR would have happy to include this change ? it looks like it might be a breaking change for all the non 13.x relay user.

I've tested the upgrade on a complicated relay + Vite codebase and except for this required fix everything else is working.