Theo's Typesafe Cult•2y ago

how to get vite-plugin-relay to work

hello. I'm trying to use this plugin as a last-mile build solution for the relay parts that need to be babel transformed, using clojurescript that was compiled using shadow-cljs into esm. I've been able to use this plugin with much success in the past but am finding it difficult for this one use case and was wondering what it is I'm overlooking since I'm getting this error when loading the site with vite

browser.js:1 Uncaught Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as

graphql. Note also that there cannot be a space between graphql and the backtick that follows. , which I'm taking to mean that the plugin was not applied. Thank you!

10 Replies

Brendonovich•2y ago

@oscartbeaumont any ideas?

Unknown User•2y ago

Message Not Public

alan•2y ago

definitely! a part of the compiled code that I would try to build using vite and the plugin looks like this:

import "./cljs_env.js";
goog.provide('app.core');
var module$node_modules$react_dom$client=shadow.js.require("module$node_modules$react_dom$client", {});
var module$node_modules$react_relay$index=shadow.js.require("module$node_modules$react_relay$index", {});
app.core.query = module$node_modules$react_relay$index.graphql`
query app_pages_homeQuery {
                            rates(currency: "USD") {
                              currency
                              rate
                            }
                           }
`;
app.core.gql = (function (){var G__32142 = (function app$core$gql_render(props__31358__auto__,maybe_ref__31359__auto__){
var vec__32143 = new cljs.core.PersistentVector(null, 2, 5, cljs.core.PersistentVector.EMPTY_NODE, [helix.core.extract_cljs_props(props__31358__auto__),maybe_ref__31359__auto__], null);

var map__32146 = (app.core.query.cljs$core$IFn$_invoke$arity$1 ? app.core.query.cljs$core$IFn$_invoke$arity$1(module$node_modules$react_relay$index.useLazyLoadQuery) : app.core.query.call(null,module$node_modules$react_relay$index.useLazyLoadQuery));
var map__32146__$1 = cljs.core.__destructure_map(map__32146);
var rates = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32146__$1,new cljs.core.Keyword(null,"rates","rates",-990130920));
var map__32147 = rates;
var map__32147__$1 = cljs.core.__destructure_map(map__32147);
var currency = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32147__$1,new cljs.core.Keyword(null,"currency","currency",-898327568));
var rate = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32147__$1,new cljs.core.Keyword(null,"rate","rate",-1428659698));
return helix.core.get_react().createElement("div",(function (){var obj32149 = ({"key":currency});
return obj32149;
})(),helix.core.get_react().createElement("p",null,currency,": ",rate));
});
...

import "./cljs_env.js";
goog.provide('app.core');
var module$node_modules$react_dom$client=shadow.js.require("module$node_modules$react_dom$client", {});
var module$node_modules$react_relay$index=shadow.js.require("module$node_modules$react_relay$index", {});
app.core.query = module$node_modules$react_relay$index.graphql`
query app_pages_homeQuery {
                            rates(currency: "USD") {
                              currency
                              rate
                            }
                           }
`;
app.core.gql = (function (){var G__32142 = (function app$core$gql_render(props__31358__auto__,maybe_ref__31359__auto__){
var vec__32143 = new cljs.core.PersistentVector(null, 2, 5, cljs.core.PersistentVector.EMPTY_NODE, [helix.core.extract_cljs_props(props__31358__auto__),maybe_ref__31359__auto__], null);

var map__32146 = (app.core.query.cljs$core$IFn$_invoke$arity$1 ? app.core.query.cljs$core$IFn$_invoke$arity$1(module$node_modules$react_relay$index.useLazyLoadQuery) : app.core.query.call(null,module$node_modules$react_relay$index.useLazyLoadQuery));
var map__32146__$1 = cljs.core.__destructure_map(map__32146);
var rates = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32146__$1,new cljs.core.Keyword(null,"rates","rates",-990130920));
var map__32147 = rates;
var map__32147__$1 = cljs.core.__destructure_map(map__32147);
var currency = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32147__$1,new cljs.core.Keyword(null,"currency","currency",-898327568));
var rate = cljs.core.get.cljs$core$IFn$_invoke$arity$2(map__32147__$1,new cljs.core.Keyword(null,"rate","rate",-1428659698));
return helix.core.get_react().createElement("div",(function (){var obj32149 = ({"key":currency});
return obj32149;
})(),helix.core.get_react().createElement("p",null,currency,": ",rate));
});
...

alan•2y ago

I also did try this one out https://github.com/cometkim/vite-plugin-relay-lite , which helped move me further, but still didn't get me there. I feel like it might be possibly the way the compilation's done before it gets to vite that might be the main issue, at least based on what I saw from vite-plugin-inspect.

GitHub

GitHub - cometkim/vite-plugin-relay-lite: Vite plugin for more conv...

Vite plugin for more convenient Relay experience. Contribute to cometkim/vite-plugin-relay-lite development by creating an account on GitHub.

alan•2y ago

with vite-plugin-relay, I get this where the query is left as is, which may be more a babel-plugin-relay thing than anything else

alan•2y ago

with the other plugin which doesn't depend on that plugin, the diff looks like this:

alan•2y ago

but then when running a successful example with vite-plugin-relay using the vite-2 example, I see this:

alan•2y ago

the part I'm stuck at with my example with the lite plugin is that it seems to output this

app.core.query = module$node_modules$react_relay$index.(graphql__28cc5aa159a3a0063f56c891d87c3748.hash && graphql__28cc5aa159a3a0063f56c891d87c3748.hash !== "28cc5aa159a3a0063f56c891d87c3748" && console.error("The definition of 'app_pages_homeQuery' appears to have changed. Run

relay-compiler to update the generated files to receive the expected data."), graphql__28cc5aa159a3a0063f56c891d87c3748); , which is a bit confusing since the compiled code seems to suggest that useLazyLoadQuery would be passed into some method that belongs to the node that replaces the query rather than the other way around I'll try to create a minimal repro without the buggy part of the compiled code on stackblitz. the plugin definitely works for other use cases.

Brendonovich•2y ago

I think it may be because the compiled clojurescript is using a qualified version of the graphql tag, accessing it by dotting into a few objects, which may cause the babel plugin to not recognise it.

alan•2y ago

that was exactly it. thank you very much! I also wasn't able to find a way to get clojurescript onto stackblitz. I'm not sure if any online platform supports that as well

Gaming

Programming

how to get vite-plugin-relay to work