[WIP] Relay compat #280

sj26 · 2017-05-26T01:39:42Z

The road to relay modern involves switching our existing components to use the compat API, which is an adapter to the classic relay environment with the modern API. There are a few steps. The first is getting relay compiler working.

This PR gets the compiler working as yarn run relay as suggested. This spits out graphql generated files extracted from the relay component files. It can be run with --watch to notice changes to files to recompile them, and we could put this into foreman.

But while the watcher is optional, you must have facebook's watchman installed to run the compiler at all because of poor isolation (facebook/relay#1644). This is easy in dev — brew install watchman — but this will break the CI build unless we install watchman on the agents and that's a bit silly. So we may have to wait for that to be fixed.

There's also a lovely webpack plugin which can automatically compile the graphql files during the webpack build, in dev and prod. It still requires watchman because it still uses relay-compiler under the hood. But it doesn't really work for me. It sounds like they need to work with the relay compiler folks to make it more modular and better integrated with webpack. Early days.

frontend$ foreman run --root ../.. -- yarn run build
yarn run v0.24.6
$ NODE_ENV=development webpack --config webpack/config.js --progress --bail
 62% building modules 903/1029 modules 126 active ...s/core-js/library/fn/object/create.jsModuleNotFoundError: Module not found: Error: Can't resolve './__generated__/agent_tokens_organization.graphql' in '/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index'
    at factoryCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/webpack/lib/Compilation.js:260:39)
    at factory (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/webpack/lib/NormalModuleFactory.js:247:20)
    at resolver (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/webpack/lib/NormalModuleFactory.js:65:21)
    at asyncLib.parallel (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/webpack/lib/NormalModuleFactory.js:138:21)
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/async/dist/async.js:3838:9
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/async/dist/async.js:996:13)
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/async/dist/async.js:906:16
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/async/dist/async.js:3835:13
    at resolvers.normal.resolve (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/webpack/lib/NormalModuleFactory.js:130:23)
    at onResolved (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/tapable/lib/Tapable.js:283:15
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:38:4
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at Resolver.applyPluginsAsyncSeriesBailResult1 (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/tapable/lib/Tapable.js:181:46)
    at innerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/tapable/lib/Tapable.js:283:15
    at innerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/Resolver.js:123:11)
    at loggingCallbackWrapper (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/tapable/lib/Tapable.js:283:15
    at resolver.doResolve.createInnerCallback (/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
resolve './__generated__/agent_tokens_organization.graphql' in '/Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index'
  using description file: /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/package.json (relative path: ./app/components/agent/Index)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/package.json (relative path: ./app/components/agent/Index)
    using description file: /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/package.json (relative path: ./app/components/agent/Index/__generated__/agent_tokens_organization.graphql)
      as directory
        /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index/__generated__/agent_tokens_organization.graphql doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index/__generated__/agent_tokens_organization.graphql doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index/__generated__/agent_tokens_organization.graphql.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sj26/Projects/Buildkite/buildkite/vendor/frontend/app/components/agent/Index/__generated__/agent_tokens_organization.graphql.json doesn't exist
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'll keep an eye on things and update this branch accordingly.

sj26 · 2017-05-26T02:12:33Z

I think I found the issue in the webpack plugin. Lodged an issue upstream to investigate.

Relay compiler expects very conventional naming so that the generated graphql files can be found.

sj26 · 2017-05-31T05:05:35Z

Closing in favour of @288

sj26 mentioned this pull request May 26, 2017

Out of order compilation causing "module not found" error Mainframe-Archive/relay-compiler-webpack-plugin#4

Closed

sj26 force-pushed the relay-compat branch from 52440ea to 3e47f50 Compare May 26, 2017 02:12

sj26 added 6 commits May 29, 2017 08:00

Extract some dependencies into dev

4d3d6f6

This was for babel-relay-plugin-loader

9cf402e

Get relay-compiler working

cebc352

Webpack can do the relay compile, too

58d8055

Name files after components

80c5e6d

Relay compiler expects very conventional naming so that the generated graphql files can be found.

Convert a simple component to a fragment container

6cf3cab

sj26 force-pushed the relay-compat branch from 3e47f50 to 6cf3cab Compare May 28, 2017 22:05

sj26 closed this May 31, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Relay compat #280

[WIP] Relay compat #280

sj26 commented May 26, 2017 •

edited

Loading

sj26 commented May 26, 2017

sj26 commented May 31, 2017

[WIP] Relay compat #280

[WIP] Relay compat #280

Conversation

sj26 commented May 26, 2017 • edited Loading

sj26 commented May 26, 2017

sj26 commented May 31, 2017

sj26 commented May 26, 2017 •

edited

Loading