Expose a config option for artifactDirectory

[kejistan]

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.

[cliedeman]

Are you using a relay.config.js?

https://relay.dev/docs/getting-started/installation-and-setup/#compiler-configuration

[kejistan]

Yes, but you need to configure this both in the plugin as well as in the relay.config.js:

artifactDirectory A specific directory to output all artifacts to. When enabling this the babel plugin needs artifactDirectory to be set as well. [string]

https://github.com/facebook/relay/tree/main/packages/relay-compiler#configuration

[cliedeman]

I see.

From version 13 it will read the relay.config.js

In the meantime you copy the plugin into your project as a temporary solution

vite.config.ts

import type { Plugin } from "vite";
import { defineConfig } from "vite";
import { transformSync } from "@babel/core";

function relay(): Plugin {
  return {
    name: "vite:relay",
    transform(src, id) {
      let code = src;
      if (/.(t|j)sx?/.test(id) && src.includes("graphql`")) {
        const out = transformSync(src, {
          plugins: [
            [
              require.resolve("babel-plugin-relay"),
              {
                // TODO: your custom config
              },
            ],
          ],
          code: true,
        });

        if (!out?.code) throw new Error("vite-plugin-react Failed to build");
        code = out.code;
      }

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

export default defineConfig({
  plugins: [..., relay],
});

[kejistan]

I came back to this and figured out why it was failing. It wasn't the inability to specify the artifactDirectory in the plugin, you're right that the plugin can find it from the config file directly. It was actually the fact that the babel plugin is invoked without any file information: https://github.com/oscartbeaumont/vite-plugin-relay/pull/334

[tobias-tengler]

This should also be resolved by my PR: https://github.com/oscartbeaumont/vite-plugin-relay/pull/424