Does snowpack support relay / graphql projects?

[tony]

Would snowpack work with JS / TS with graphql?

Are there any examples / anyone with a project using relay with snowpack?

If so could you make a repo with a minimal example of the config?

(If you're in a similar situation, feel free to chime in!)

[FredKSchott]

pika.dev was built with TS + Apollo! That codebase isn't public, but I can definitely say that it's possible. Not sure about Relay though.

Based on the docs, it looks like Relay is powered by Babel and then a custom relay-compiler tool. That makes me think you just need to use something like:

// Based on https://relay.dev/docs/en/installation-and-setup
// Still TODO: set up your babel config file
"plugins": [
  ["@snowpack/plugin-babel", {}],
  ["@snowpack/plugin-run-script", {
    "cmd": "relay-compiler --src ./src --schema ./schema.graphql --extensions js jsx", 
    "watch": "$1 --watch"
  }],

If anyone can get this working in a repo, I'd love to share a link!

[theseyi]

relay also uses babel-plugin-relay to transpile calls to graphql(). So

      query={graphql`
        query AppQuery {
          car(id: 1) {
            id
          }
        }
      `}

get compiled to

 query: _AppQuery !== void 0 ? _AppQuery : (_AppQuery = require("./__generated__/AppQuery.graphql"), _AppQuery.hash && _AppQuery.hash !== "3eb94bb34b41dedd493e2b92c62bdaab" && console.error("The definition of 'AppQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AppQuery)

This doesn't work with snowpack because of the require call. I've just encountered this, so not sure what the workaround is...

[bobbyrenwick]

I'm also looking at this and wanting to switch from webpack + Babel. We use tagged queries inside our TS files that are then preprocessed with babel-plugin-graphql-tag

Would the suggestion above be slower than normal snowpack because of the Babel plugin?

[rubas]

(From my notes, found it somewhere else)

The issue you’re facing is that relay requires a Babel plugin in order to function,
but the Babel plugin will use CommonJS modules and not ES modules. I wrote a quick
custom snowpack plugin that fixes this (check out the relay.snowpack.js file) and that should help you out :)

https://github.com/samwightt/pine/blob/main/app/relay.snowpack.js
https://github.com/samwightt/pine/blob/main/app/snowpack.config.js

[bobbyrenwick]

Thanks for the help. I ended up writing https://github.com/bobbyrenwick/snowpack-plugin-graphql to load .graphQL files.

I haven't done much package building and just ripped it out of my project as soon as it worked so it's not got much config etc.

I would welcome contributors and help!

[sdemjanenko]

This doesn't look like it is published to NPM

[n1ru4l]

the relay babel plugin has an option for specifying es modules:

https://github.com/facebook/relay/blob/99234da330c67a938fd9136938f6f1f99511dbc1/packages/babel-plugin-relay/BabelPluginRelay.js#L32

babel.config.json

{
  "plugins": [["relay", { "eagerESModules": true }]],
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

The only issue I currently have is that the graphql import is not correctly stripped from the "compiled" file.

// this is correctly added via the plugin
import _chatUserListQuery from "./__generated__/chatUserListQuery.graphql.js";
import _chatUserList_data from "./__generated__/chatUserList_data.graphql.js";
// this is not correctly removed and causes a runtime error, as there is no export for this :(
// maybe it is snowpack related that this import is not correctly removed?
import { graphql } from '../../_snowpack/pkg/react-relay.js';

Edit:

After manually patching

• node_modules/.cache/snowpack/development/relay-runtime.js
• node_modules/.cache/snowpack/development/react-relay.js

by adding the missing exports, I got it to compiler. However, now it seems like the relay compiler uses require instead of import for fragments

[n1ru4l]

I opened facebook/relay#3354 for the require call generation issue.
I also built a generic workaround for the relay-compiler-language-typescript package relay-tools/relay-compiler-language-typescript#269

[n1ru4l]

After applying the plugin for relay-compiler-language typescript with patch-package. I still have to do the following manual steps:

1. run npx snowpack dev and wait until node_modules/.cache/snowpack/development/relay-runtime.js and node_modules/.cache/snowpack/development/react-relay.js are created.
2. Stop the npx snowpack dev
3. Apply the following patch for fixing the imports:

index 52a7364..6397410 100644
--- a/node_modules/.cache/snowpack/development/relay-runtime.js
+++ b/node_modules/.cache/snowpack/development/relay-runtime.js
@@ -13,4 +13,5 @@ var RecordSource = relayRuntime.RecordSource;
 var ReplaySubject = relayRuntime.ReplaySubject;
 var Store = relayRuntime.Store;
 var areEqualSelectors = relayRuntime.areEqualSelectors;
-export { Environment, Network, Observable, QueryResponseCache, Record, RecordSource, ReplaySubject, Store, areEqualSelectors };
+var ConnectionHandler = relayRuntime.ConnectionHandler
+export { Environment, Network, Observable, QueryResponseCache, Record, RecordSource, ReplaySubject, Store, areEqualSelectors, ConnectionHandler };
index 1be471e..722a755 100644
--- a/node_modules/.cache/snowpack/development/react-relay.js
+++ b/node_modules/.cache/snowpack/development/react-relay.js
@@ -2292,6 +2292,20 @@ var lib = {
 
 var reactRelay = lib;
 
-var ConnectionHandler = reactRelay.ConnectionHandler;
 export default reactRelay;
-export { ConnectionHandler };
+
+export const ConnectionHandler = relayRuntime.ConnectionHandler
+export const QueryRenderer = ReactRelayQueryRenderer_1
+export const LocalQueryRenderer = ReactRelayLocalQueryRenderer_1
+export const MutationTypes = relayRuntime.MutationTypes
+export const RangeOperations = relayRuntime.RangeOperations
+export const applyOptimisticMutation = relayRuntime.applyOptimisticMutation
+export const commitLocalUpdate = relayRuntime.commitLocalUpdate
+export const commitMutation = relayRuntime.commitMutation
+export const createFragmentContainer = ReactRelayFragmentContainer.createContainer
+export const createPaginationContainer = ReactRelayPaginationContainer.createContainer
+export const createRefetchContainer = ReactRelayRefetchContainer.createContainer
+export const graphql = relayRuntime.graphql
+export const readInlineData = relayRuntime.readInlineData
+export const requestSubscription = relayRuntime.requestSubscription
+export { ReactRelayContext, fetchQuery }

4. run npx snowpack dev (files won't be overwritten as they tend to be cached)

I assume that those two files are generated by snowpack. relay does not have a esm build, so I cannot fully understand what is happening, but I guess snowpack tries to convert the packages to ESM. Is that information correct?

As I think more of it this could also be interpreted as the actual typescript typings for those packages being incorrect. TypeDefs should only use import foo from "modulename" export if they are actual ESM modules. Otherwise, the import foo = require('moduleName') should be used. In this specific case, it seems like @types/react-relay and @types/relay-runtime are wrongly typed, which causes snowpack to fail during dependency resolution. However, webpack tries to handle imports differently as the (possible) correct import syntax works as expected.

snowpackconfig.js

/** @type {import("snowpack").SnowpackUserConfig } */
// eslint-disable-next-line strict
module.exports = {
  "mount": {
    "public": { "url": "/", "static": true },
    "src": { "url": "/dist" }
  },
  "plugins": ["@snowpack/plugin-dotenv", "@snowpack/plugin-babel"]
}

babel config.json

{
  "plugins": [["relay", { "eagerESModules": true }]],
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

[n1ru4l]

Digging some more this might be related to https://github.com/snowpackjs/snowpack/blob/fc3a65c681a65d8d2872584f67477a16ef53f23f/esinstall/src/index.ts#L56

[n1ru4l]

Got it running with the following config :)

/** @type {import("snowpack").SnowpackUserConfig } */
// eslint-disable-next-line strict
module.exports = {
  "mount": {
    "public": { "url": "/", "static": true },
    "src": { "url": "/dist" }
  },
  "plugins": ["@snowpack/plugin-dotenv", "@snowpack/plugin-babel"],
  packageOptions: {
    namedExports: ["react-relay", 'relay-runtime']
  }
}

[radoslavkarlik]

graphql imports are stripped when you use the babel-plugin-relay/macro instead, docs.

Is there a way how to solve importing hooks from the react-relay package without turning the imports in 2 steps?