Fork me on GitHub
#fulcro
<
2021-04-22
>
NikolaMandic07:04:56

hello I have a newbie question I'm having two components parent and child component I'm trying to update child component when state of the state machine changes without rerendering parent after adding query for component states in both components I see that the parent updates but child does not except when I pass the props to the child I'd like not to have query in parent component is that possible or am I just not doing it right? what i try to do in more detail is to inline add form to an inventory list and I added state machine so once you click on new button it triggers state machine change so component that has to render a change looks like this and this is not enough to have it fetch state machine state, that does get changed since parent component with the same query does rerender since I guess its on root of the router :initial-state (fn [params] [ ]) :query (fn [] [ (uism/asm-ident :newstuff)]) :ident (fn [] [:component/id ::inventory-add]) any tips appreciated

Jakub Holý (HolyJak)18:04:28

Sorry, I do not follow sufficiently. Perhaps if you could share the key pieces of the code, commented, in a gist? BTW, I noticed you use the lambda fform of query and init state. That should only be done if unavoidable not to loose helpful dev tips.

NikolaMandic19:04:37

thanks here is two components I try to render https://pastebin.com/aj6csSa6 listroot is parent component and addstuff is button rendered inside of it in fulcro template I added listroot to be rendered like so (lstt/list-root) now I am trying to rerender the button when it is clicked button triggers mutation and listroot indeed rerenders I am watching videos from Mr. Kay on fulcro trying to wrap my head around why doesn't the button render

NikolaMandic19:04:42

I'm thinking if I just added query like in root component it will refresh just like root component but it might be that it references something else trying to wrap my head around it

NikolaMandic19:04:17

I assume it should be possible by looking more at the videos but so far I failed to connect how exactly queries in subcomponents reference the state

NikolaMandic19:04:23

u dont have to waste much time any tip at what you would look at would be helpful what comes first to your mind

NikolaMandic19:04:43

once I pass it the props it does rerender but I'm like I guess its more elegant than that

NikolaMandic21:04:31

I'm now thinking one has to pass the props to subcomponents. wonder if this is how it should be if author designed it this way

Jakub Holý (HolyJak)17:04:58

Yes, (lstadd/add-inventory-simple ) is indeed wrong, you always must pass props to sub components. That is a basic fact of React, which is under Fulcro. I see you use Link Queries, that looks like a weird thing to me. UI in Fulcro is a tree and so is the data that feeds it. A component asks its parent for the data it needs (via its query, which the parent must compose into its own query and so on all the way to Root), the parent in return supplies it its props. Sorry for the late response, I had not time.

Jakub Holý (HolyJak)17:04:59

Did you go through https://fulcro-community.github.io/guides/tutorial-minimalist-fulcro/ ? If it is not explaining these things clearly, I would be thankful for any tips on improving the clarity.

Jakub Holý (HolyJak)17:04:48

PS: Next time consider using http://gist.github.com/ instead of pastebin, it has source code highlighting for clojure(script), which makes it easier to read.

bbss12:04:00

I started running into performance issues with a part of my app and am trying out the latest hooks (use-component/use-uism/use-root). I've adjusted some code so I can use a pre-existing ident: • pulling ident key from options in add-component and using that if available instead of calling get-ident • adding deps array to use-lifecycle so I can pass the (str ident) in use-component 's use-lifecycle deps It's improving performance a bit already, before I was using the use-query-subscription stuff which would go over a lot of stuff that it shouldn't. It cleaned up some places where I subscribed to ::uism/active-state of some sm a bunch. But I noticed now that's not properly working. Am I reading it correct and seeing use-component can only subscribe one listener per ident? If so I guess we need a place to add an id per use-component usage somewhere for ::app/render-listeners.

tony.kay14:04:35

Are you using the SHA-based latest of 3.5? I just pushed some stuff last night on that.

tony.kay14:04:00

I am aware of the problem with not using idents in the lifecycle…changing idents will cause problems. So, there’s a bit of work to do there as well

tony.kay14:04:20

ae128d71d8bcdd36ffdbf43f26e35e5508ce8b6b

bbss15:04:02

Ah no, wasn't using that sha, let me check it out.

bbss16:04:39

made my earlier mentioned adjustments and the performance is now quite good with more room for improvements in having smaller queries, dropping way less frames!

bbss16:04:08

Still the issue remains of one of the use-component not getting updates (I think because I use the same ident in multiple use-component ?)

bbss17:04:44

added an id to use-component so that's solved too 🙂

bbss17:04:00

performance is better than it's ever been, this particular view has quite a lot going on. it has an image of text with ocr detection overlayed and can be zoomed/dragged/clicked and is in-sync with two scrollable lists, interacting back and forth with clicks/scrolls into view. Using a bunch of springs for animation as well. No wonder this needs a bunch of attention to keep running smoothly.

🎉 2
tony.kay03:04:08

ah, you were talking about same ident mount more than one place…I was talking about a component changing ID while mounted so that the ident changes, which causes other problems. Glad to hear it is better. That most recent optimization was a really good one.

peterdee19:04:03

In upgrading from fulcro 3.4.18 to 3.4.19 my app, running in dev mode with shadow-cljs and emacs, stopped connecting. It does not connect in 3.4.21 either. The log shows “An error occurred when calling (app.client.init) eval shadow.module.main.append.js:4.

Jakub Holý (HolyJak)22:04:47

You can try asking in #shadow-cljs Check you are not pulling in multiple versions of cljs. Clean everything.

peterdee19:04:42

I have had problems upgrading shadow-cljs too. I am stuck at 2.11.11. Maybe I should look at that first,.

Tyler Nisonoff23:04:10

is there a simple way to hook into RAD’s pathom parsers process-error for error reporting? or how are folks reporting errors from their RAD resolvers? (The answer may be, if you want something more complex, build your own parser / plugins?) Update: As Tony pointed out, Turns out RAD logs to log/err with the error, so a timbre appender can be used for this

tony.kay03:04:54

Error handling could use a little love

tony.kay03:04:49

I’ve done some work on it, but I don’t even remember what. In general, though, I’d first recommend you read my thoughts on error handling in the book.

Tyler Nisonoff03:04:42

I recall the philosophy of UI should not cause errors in the working state, and therefore errors can be: • bugs • infra issues • security issues • etc. I just want to track my bugs in something like Sentry 😛

Tyler Nisonoff03:04:14

I created a custom parser that looks similar to RADs, but with my own process-error for now

tony.kay03:04:24

oh, I just add a timbre appender for that and log them 😄

Tyler Nisonoff03:04:09

ooh duh, thats the right approach!