Fork me on GitHub
#fulcro
<
2019-01-26
>
tony.kay00:01:55

The video tutorials are “out of date”, but everything in them is perfectly valid

tony.kay00:01:14

nothing has disappeared, it’s just some of the template stuff you might see doesn’t match up.

hmaurer00:01:36

@tony.kay Good evening 🙂 I was reading through the routing section of the book / examples today and I don’t quite understand how idents for screens should be picked. The first part of the ident is the page (which afaik is so that we can do a union query on it), but the second part of the ident seems arbitrary. What is its role?

currentoor00:01:42

@hmaurer that confused me for a while too, but it’s simpler than i first thought

currentoor00:01:24

you’re right the first part is the page, because of union queries, and the second part is arbitrary

currentoor00:01:59

the can second part can be a constant when you’re looking at a fixed screen like [:dashboard :tab]

currentoor00:01:44

or in the same router you can swap in an ident for a specific record [:person/by-id 123]

currentoor00:01:21

the first part has to be distinct per route, and the second can be whatever, including something the query engine can use to fulfill your query results (like an ident of some data you loaded from the server)

hmaurer00:01:01

@currentoor thanks for the reply! so if the second part is a constant, then it doesn’t matter at all what it is, right? And here you gave me an example where the ident is a record; how would you represent a route to a screen with a query that has a few dynamic parameters depending on route parameters? Would that be a constant as well, and then you would pull the parameters when loading the data?

currentoor00:01:50

i can give you an example

hmaurer00:01:00

That would be great, thanks 🙂 And while I am at it, where do you put data loading for a route? I was thinking of inserting a call to df/load in https://github.com/fulcro-legacy/fulcro-template/blob/develop/src/main/fulcro_template/ui/html5_routing.cljc#L94 (based on the match)

currentoor00:01:55

so i know it’s possible but i don’t bother putting the data needed for a load in a route

currentoor00:01:05

that is one way of doing it but certainly not the only way

hmaurer00:01:18

how do you do it?

currentoor00:01:52

you can open that in github, it’ll look better there

currentoor00:01:58

slack tried to inline it

currentoor00:01:28

but i first navigate to list view, which loads a list of tax-ids and their names (aka titles)

currentoor00:01:49

then when i click on a listen element i call df/load

currentoor00:01:10

both loads can happen in componentDidMount, or in a route change handler

hmaurer00:01:26

I see; reading through your code now; it looks like it also has loading indicators, which is another thing I’ve been trying to figure out 🙂

hmaurer00:01:52

@currentoor componentDidMount seems like a good place; it gives you access to props to parametarise the query as well

currentoor00:01:59

i find componentDidMount is fine for getting it working quickly, but probably better to do it from a route change event handler type thing

currentoor00:01:34

in this project i’m using state machines all over the place and so i call load in state machine event handlers (along with route changes and whatnot)

hmaurer00:01:37

@currentoor https://gist.github.com/hmaurer/9ed3992266288382435f88095d743257#file-mixed-router-cljs-L102 ; when I tried to implement loading indicator I had a flickering issue where the indicator would initially not render.

hmaurer00:01:13

@currentoor did you encounter a flickering issue at first when you tried to implement these?

currentoor00:01:48

so find out why the flicker, are your props nil?

currentoor00:01:56

what’s turning them into nils?

currentoor00:01:11

is the load? turn that off and use stubbed data in app state

hmaurer00:01:09

@currentoor well I think what was going on is that my UI was rendering before I triggered df/load, and so that that point there was no loading marker

currentoor00:01:52

ok then show a loader whenever there is a load marker OR props are nil

hmaurer01:01:31

@currentoor Alright, thanks, will try that. Last question: when you do a df/load for tax details, do you set the :marker option?

currentoor01:01:38

yes, the marker is set to :actor/detail

currentoor01:01:46

and that’s what i’m checking for in the render

hmaurer01:01:11

💯 thanks a lot 🙂

hmaurer00:01:10

> but probably better to do it from a route change event handler type thing isn’t that what I was suggesting initially? Putting it in the pushy callback? or am I misunderstanding it?

currentoor00:01:51

depends on if you’re using URL routing which is different than fulcro routers

hmaurer00:01:07

right, true

currentoor00:01:10

the two can work together, in my project i’m not using URL routing

currentoor02:01:21

@hmaurer another downside to componentDidMount is if you’re load is broken then it can cause your component to re-mount, which triggers yet another broken load and goes on in an infinite loop

currentoor02:01:05

if you do your loads in an event handler (state machine, onClick, client mutation, etc) then you can be sure it only happens that one time

exit214:01:51

are there any similar hooks to afterRender built into Fulcro? I’m trying to use this, https://github.com/PEZ/clerk#after-render

tony.kay21:01:27

@njj why not just use componentDidUpdate on root?

👍 5