Relay support does not work with multiple artifact directories

[mmmulani]

Link to the code that reproduces this issue

https://github.com/mmmulani/relay-multi/tree/main

To Reproduce

Note: The linked github repo has a workaround in place.

This issue is about using Relay's multi-project configuration to have graphQL queries in different "projects" where one project can reference another. The most common example of this is something like a "web" folder that uses graphQL fragments in a "shared" folder.

This is

1. Create a NextJS project in web-app.
2. Add a multi-project Relay config to your web-app package.json, e.g.

   "relay": {
   "root": "..",
   "sources": {
     "shared": "shared",
     "web-app": "web-app"
   },
   "projects": {
     "shared": {
       "language": "typescript",
       "output": "shared/__generated__",
       "schema": "shared/schema.graphql"
     },
     "web-app": {
       "base": "shared",
       "language": "typescript",
       "output": "web-app/__generated__",
       "schema": "shared/schema.graphql"
     }
   }
   },

   3. Create a component in shared/ that uses graphQL, e.g. TestComponent.tsx with:

      const countryFragment = graphql`
      fragment TestComponent_country on Country {
      name
      phone
      currency
      emoji
      }
      `

   4. Try importing shared/TestComponent inside web-app/

Current vs. Expected behavior

Current behaviour: the import fails as the Relay SWC plugin expects the Relay generated graphQL file to live in web-app/__generated__ rather than shared/__generated__

Module not found: Can't resolve '/relay-multi/web-app/./__generated__/TestComponent_country.graphql.ts'

You would expect there to be some way to specify the multi project config inside the next.config.js file so that the plugin knows to look in shared/__generated__ rather than web-app/__generated__.

Workaround

You can workaround this by modifying module resolution in next.config.js with:

const path = require("path");
const webpack = require("webpack");

function graphQLRewrite() {
  // This plugin works around an issue with Next.js's Relay support.
  // Next.js's Relay plugin will convert the code like:
  //   const userFragment = graphql`...`
  // into:
  //   const userFragment = import('<artifactDirectory>/UserFragment.graphql.ts')
  // which works for Next.js projects with a single Relay folder. However, in our setup we have Relay files in
  // @cv/shared-web, with generated artifacts in that folder as well.
  // This plugin will rewrite the import statements for those graphql usages to match the correct artifactDirectory.
  return new webpack.NormalModuleReplacementPlugin(/\.graphql\.ts$/, (resource) => {
    const repoRoot = path.resolve(__dirname, '..'); // relay-multi/
    const sourceFile = resource.contextInfo.issuer; // relay-multi/shared/TestComponent.tsx

    const fileProjectDir = sourceFile.slice(repoRoot.length).split('/')[1]; // shared
    const currentRequest = path.resolve(resource.request); // relay-multi/<some dir>/__generated__/TestComponent_country.graphql.ts
    const fileName = path.basename(currentRequest); // TestComponent_country.graphql.ts

    const correctGraphQLPath = path.resolve(repoRoot, fileProjectDir, '__generated__', fileName);
    resource.request = correctGraphQLPath;
  });
}

const nextConfig = {
  compiler: {
    relay: {
      src: './',
      artifactDirectory: './__generated__',
      language: 'typescript',
    },
  },
  webpack: (config) => {
    config.plugins.push(graphQLRewrite());
    return config;
  },
};

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 21.6.2
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

SWC

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

_PACK-2986

[mmmulani]

cc @tbezman based on #33240 and @alunyov in case he has any ideas for how best to interpret a Relay config to determine the generated artifact's path

[kdy1]

What's the expected "fix"? Should the relay plugin accept multiple artifact paths?

[mmmulani]

yeah I think having the relay plugin allow for some multiple artifact paths would work. alternatively, some way to provide a function to generate the artifact path though i'm not sure if this is possible given the relay plugin is written in rust (and probably would be much slower)

the ideal solution would be parsing the relay config, and determining the expected artifact path from that.

[mmmulani]

hey, how does this work now? was looking through https://github.com/swc-project/plugins/commits/main/packages/relay for some example usage but couldn't find any

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

[kdy1]

Oops this is not fixed

[kdy1]

https://github.com/swc-project/plugins/pull/318 adds multi-project support to swc_relay. I'll close this issue once I update next.js

[mmmulani]

whoa awesome, looks like a lot of work so thanks a ton!

is there any way to use this with older next versions? or is upgrading just the best way? (in case, maybe the swc plugin api changed?)

[kdy1]

One plugin API is added and it's documented at https://github.com/swc-project/plugins/tree/aff55e5c6e1aceb18cfab49addb946f573fd13a4/packages/relay#example

You may configure @swc/relay Wasm plugin directly via experimental.swcPlugins like https://nextjs.org/docs/architecture/nextjs-compiler#swc-plugins-experimental