Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relay Support in Rust Compiler #33240

Merged
merged 46 commits into from Jan 26, 2022
Merged

Relay Support in Rust Compiler #33240

merged 46 commits into from Jan 26, 2022

Conversation

tbezman
Copy link
Contributor

@tbezman tbezman commented Jan 13, 2022

Feature

Implements feature requested in #30805.

A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation.

How it works?

Finds all graphql tagged template experssions and replaces them with requires to the file generated by Relay.

Where I need help

  • I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.

  • Is there any performance overhead to many duplicate usages of require? I imagine there's a cache in place but I want to be sure.

  • I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.

  • Related issues linked using fixes #number

  • Integration tests added

  • Documentation added

    • I haven't added any docs since this is an experimental API.

Documentation / Examples

You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.

Usage

In your next.config.js

module.exports = {
  experimental: {
    relay: {
      language: 'typescript', // or 'javascript`
      artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
    }
  }
}

package.json Show resolved Hide resolved
@tbezman tbezman marked this pull request as ready for review Jan 13, 2022
@timneutkens
Copy link
Member

timneutkens commented Jan 13, 2022

Thanks for this PR! Great work 🎉 I've asked @kdy1 to review it.

Copy link
Member

@kdy1 kdy1 left a comment

I didn't review tests yet.

packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
packages/next-swc/crates/core/src/relay.rs Outdated Show resolved Hide resolved
@ijjk

This comment has been minimized.

@tbezman
Copy link
Contributor Author

tbezman commented Jan 13, 2022

Thanks for the feedback @kdy1 . I'll incorporate your feedback tonight.

timneutkens
timneutkens previously approved these changes Jan 26, 2022
@ijjk

This comment has been minimized.

@tbezman
Copy link
Contributor Author

tbezman commented Jan 26, 2022

Last minute push to fix CI checks.

@ijjk
Copy link
Member

ijjk commented Jan 26, 2022

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary tbezman/next.js relay-plugin Change
buildDuration 15.2s 15.3s ⚠️ +74ms
buildDurationCached 3.8s 3.9s ⚠️ +6ms
nodeModulesSize 463 MB 463 MB ⚠️ +483 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary tbezman/next.js relay-plugin Change
/ failed reqs 0 0
/ total time (seconds) 3.79 3.85 ⚠️ +0.06
/ avg req/sec 659.63 649.35 ⚠️ -10.28
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.992 2.059 ⚠️ +0.07
/error-in-render avg req/sec 1254.77 1214.36 ⚠️ -40.41
Client Bundles (main, webpack, commons)
vercel/next.js canary tbezman/next.js relay-plugin Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 27.2 kB 27.2 kB
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 71 kB 71 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary tbezman/next.js relay-plugin Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary tbezman/next.js relay-plugin Change
_app-HASH.js gzip 1.37 kB 1.37 kB
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 326 B 326 B
dynamic-HASH.js gzip 2.37 kB 2.37 kB
head-HASH.js gzip 350 B 350 B
hooks-HASH.js gzip 919 B 919 B
image-HASH.js gzip 4.94 kB 4.94 kB
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.19 kB 2.19 kB
routerDirect..HASH.js gzip 321 B 321 B
script-HASH.js gzip 383 B 383 B
withRouter-HASH.js gzip 318 B 318 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.4 kB 14.4 kB
Client Build Manifests
vercel/next.js canary tbezman/next.js relay-plugin Change
_buildManifest.js gzip 460 B 460 B
Overall change 460 B 460 B
Rendered Page Sizes
vercel/next.js canary tbezman/next.js relay-plugin Change
index.html gzip 531 B 531 B
link.html gzip 545 B 545 B
withRouter.html gzip 526 B 526 B
Overall change 1.6 kB 1.6 kB

Default Build with SWC (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary tbezman/next.js relay-plugin Change
buildDuration 19.4s 19.5s ⚠️ +22ms
buildDurationCached 3.8s 3.8s ⚠️ +47ms
nodeModulesSize 463 MB 463 MB ⚠️ +483 B
Page Load Tests Overall increase ✓
vercel/next.js canary tbezman/next.js relay-plugin Change
/ failed reqs 0 0
/ total time (seconds) 3.784 3.829 ⚠️ +0.05
/ avg req/sec 660.6 652.97 ⚠️ -7.63
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 2.051 2.016 -0.04
/error-in-render avg req/sec 1218.98 1239.87 +20.89
Client Bundles (main, webpack, commons)
vercel/next.js canary tbezman/next.js relay-plugin Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.3 kB 42.3 kB
main-HASH.js gzip 27.3 kB 27.3 kB
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 71.3 kB 71.3 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary tbezman/next.js relay-plugin Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary tbezman/next.js relay-plugin Change
_app-HASH.js gzip 1.35 kB 1.35 kB
_error-HASH.js gzip 180 B 180 B
amp-HASH.js gzip 305 B 305 B
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.36 kB 2.36 kB
head-HASH.js gzip 342 B 342 B
hooks-HASH.js gzip 911 B 911 B
image-HASH.js gzip 4.97 kB 4.97 kB
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 2.21 kB 2.21 kB
routerDirect..HASH.js gzip 314 B 314 B
script-HASH.js gzip 375 B 375 B
withRouter-HASH.js gzip 309 B 309 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.3 kB 14.3 kB
Client Build Manifests
vercel/next.js canary tbezman/next.js relay-plugin Change
_buildManifest.js gzip 459 B 459 B
Overall change 459 B 459 B
Rendered Page Sizes
vercel/next.js canary tbezman/next.js relay-plugin Change
index.html gzip 529 B 529 B
link.html gzip 543 B 543 B
withRouter.html gzip 525 B 525 B
Overall change 1.6 kB 1.6 kB
Commit: 464dd97

@kodiakhq kodiakhq bot merged commit b20eb99 into vercel:canary Jan 26, 2022
38 of 41 checks passed
@hanford
Copy link
Contributor

hanford commented Jan 26, 2022

Woo! thanks again for all the work on this friends

ijjk added a commit that referenced this issue Jan 26, 2022
@tbezman
Copy link
Contributor Author

tbezman commented Jan 26, 2022

@timneutkens When will we see a new version published. Does this happen automatically?

@ijjk
Copy link
Member

ijjk commented Jan 26, 2022

@tbezman there were some issues with the release with these changes, see #33702 for more info.

@alex-statsig
Copy link

alex-statsig commented Feb 7, 2022

Does something need to be done to make this work with jest as well? This works for me builds, but tests using the setup from docs (https://nextjs.org/docs/advanced-features/compiler) fail to transform graphql calls

@timneutkens
Copy link
Member

timneutkens commented Feb 10, 2022

@alex-statsig are you using next/jest?

@hanford
Copy link
Contributor

hanford commented Feb 10, 2022

@alex-statsig I still use babel-relay-plugin for tests, I was able to only use babel during tests (we removed our babel config to enable SWC) with the following jest config:

module.exports = {
  ..

  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': [
      'babel-jest',
      {
        presets: [
          [
            'next/babel',
            {
              'preset-react': {
                runtime: 'automatic',
                importSource: '@emotion/react',
              },
            },
          ],
        ],
        plugins: [
          [
            'relay',
            {
              src: './',
              artifactDirectory: '../../dazzle-types',
              schema: '../apps/weaver/schemas/__generated__/main.graphql',
              language: 'typescript',
            },
          ],
        ],
      },
    ],
  },
}

@alex-statsig
Copy link

alex-statsig commented Feb 10, 2022

@hanford Thanks, I'll try that - had fully removed our config hoping that "next/jest" would handle it.

@timneutkens Yes I was, same setup as linked in that doc. I'll try it out again shortly

natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022
## Feature

Implements feature requested in vercel#30805. 

A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation. 

### How it works?
Finds all  `graphql` tagged template experssions and replaces them with `require`s to the file generated by Relay.

### Where I need help
- I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.
- Is there any performance overhead to many duplicate usages of `require`? I imagine there's a cache in place but I want to be sure.
- I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
  - I haven't added any docs since this is an experimental API.

## Documentation / Examples

You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.

### Usage
In your `next.config.js`
```js
module.exports = {
  experimental: {
    relay: {
      language: 'typescript', // or 'javascript`
      artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
    }
  }
}
```


Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

9 participants