Fork me on GitHub
#fulcro
<
2018-12-20
>
jzhu512102:12:41

Hi, there, I met a problem when I trying to use nubank workspace devcard, I simply changed the original code in demo_ws.cljs to this:

(ws/defcard fulcro-demo-card
  (ct.fulcro/fulcro-card
   {::f.portal/root c/PlaceholderImage
    ::f.portal/initial-state {:w 50 :h 50 :label "hello"}}))

jzhu512102:12:03

I expect it works, but always give me error:

ui.cljs:356 Error mounting card {ns: "app.demo-ws", name: "fulcro-demo-card", str: "app.demo-ws/fulcro-demo-card", _hash: 1665702031, _meta: null, …}cljs$lang$protocol_mask$partition0$: 2154168321cljs$lang$protocol_mask$partition1$: 4096name: "fulcro-demo-card"ns: "app.demo-ws"str: "app.demo-ws/fulcro-demo-card"_hash: 1665702031_meta: null__proto__: Object cljs$core$ExceptionInfo {message: "Invalid join, {:ui/root nil}", data: {…}, cause: null, name: "Error", description: undefined, …}

jzhu512102:12:36

I can't find enough information on how to use this new nubank.workspace.

jzhu512102:12:45

anyone can help me?

jzhu512102:12:52

the c/PlaceholderImage is the fulcro template generated demo svg image holder.

currentoor05:12:00

Does your PlaceholderImage have a query?

currentoor05:12:25

What does it look like?

kszabo13:12:43

how do I deal with external libraries in my mutations that include asynchronicity? I.e. I have a javascript library that manages authentication tokens for me, but it includes a Promise based interface. How do I add the return value of that promise to my remote mutation params?

kszabo13:12:26

I’m currently wrapping my transact! calls with a callback in the UI layer and adding the params there , but that feels against the promise of Fulcro to add async code to the UI layer. I should be able to handle this within mutations I think.

jzhu512115:12:21

@currentoor Thanks for the hint, looks it's because it lacks the query, after adding it, it's ok.

jzhu512115:12:04

this code is generated by template. btw, is there any tutuorial for workspace? it's too complicated for a beginner, not easy and intuitive as devcards.

wilkerlucio15:12:30

@thenonameguy the action in transact should be only about local state, for async things/remote changes you should the remote layer (doing on the server or you can make a local implementation)

kszabo15:12:50

@wilkerlucio maybe I wasn’t clear, let me demonstrate with a minimal code example:

(defmutation do-thing [params]
  (action [env] ...)
  (remote [{:keys [ast]}] (assoc ast :params {:secure-token (some-lib/promise-call)}))) ; change the parameters

kszabo15:12:20

Since the remote body is synchronous I cannot await the promise or anything like that

wilkerlucio15:12:49

yeah, you can't, if you need to get the secure token you should do it before, if it's a chain of operations and you depending on something you can use ptransact! to nest a sequence operations that might include remotes (that can do async). The idea is to avoid uncontrolled async that can generate a lot of confusion as code base grows, makes sense?

kszabo15:12:03

ah, ok. So between the two choices of triggering a transact! from a callback vs. chained mutations the latter is preferred

wilkerlucio15:12:29

preferably not from a callback, your UI is better if it doesn't know about async at all

wilkerlucio15:12:46

you can make all data works in terms of attributes, and use your remote to pull those out, separating the concerns

kszabo15:12:17

yeah, this is calling some-libs internal API, the reason I’m pulling in the library is not having to write the network code to get the :secure-token

kszabo15:12:28

I know how I would implement it if the data resided in the app-db

kszabo15:12:49

but I guess it breaks the Fulcro model

wilkerlucio15:12:26

having the secure token on the app db?

kszabo15:12:30

yeah, the problem is it’s an Oauth2 token and the lib handles reauthentication, etc. which I don’t want to implement

kszabo15:12:41

currently everything is stored in the libs internal state

wilkerlucio15:12:50

if they have events, you can hook on those

wilkerlucio15:12:57

its totally ok to call transactions from the outside

wilkerlucio15:12:23

you need to get a hold of the app atom, from that you can get the reconciler, and you can use it to call transactions from anywhere

kszabo15:12:30

// Alternatively, you can subscribe to the 'renewed' event:
authClient.tokenManager.on('renewed', function (key, newToken, oldToken) {
  console.log(newToken);
});

wilkerlucio15:12:39

so you can still have the lib doing all of this, and syncing the fulcro db when it changews

kszabo15:12:40

it seems I am lucky

kszabo15:12:50

that would make sense

kszabo15:12:10

thanks @wilkerlucio! Awesome pathom talk btw, keep it up 👍

wilkerlucio15:12:24

you'r welcome, thanks for the feedback 🙂