Fork me on GitHub

How do I have a child stated component that has the same ident as the parent? Let's say I want the component PersonDetail to be a child of the component Person, both having the ident :person/id, am I supposed to do the following?

(defsc PersonDetail [_ props] {:ident :person/id, :query [:person/id :person/name]}
  (div "DETAILS!!!"))

(def fPersonDetail (comp/factory PersonDetail))

(defsc Person [_ props}] {:ident :person/id, :query [:person/id :person/name]}
    (fPersonDetail props)))


The above seems to work. However, if I have multiple versions of PersonDetails and would like to have a router to choose between them, the below does not seem to work:

(defsc PersonDetail1 [_ props] {:ident :person/id, :query [:person/id :person/name], route-segment ["one"]}
  (div "DETAILS11111"))

(defsc PersonDetail2 [_ props] {:ident :person/id, :query [:person/id :person/name], route-segment ["two"]}
  (div "DETAILS22222"))

(defrouter PersonRouter [_ _] {:router-targets [PersonDetail1 PersonDetail2]}

(def fPersonRouter (comp/factory PersonRouter))

(defsc Person [_ props}] {:ident :person/id, :query [:person/id :person/name]}
    (fPersonRouter props)))


PersonDetail1 or PersonDetail2 will end up receiving empty props


Basically, this is what I wanted to achieve


How would you structure your components to get something like the above (with working routing)?


@U0522TWDA I can't seem to make it work with dynamic routers. The PersonDetail component always receives [:person/id nil] as the ident.

Jakub Holý (HolyJak)22:01:37

What does the data coming from pathom look like? What does client DB look like? They're seems to be a missing connection somewhere - where?

Jakub Holý (HolyJak)22:01:35

BTW, to simplify , can you get it working without the router, with all the Details just next to each other?


Without using routers, it works as expected. Pathom returned the correct response and the component is getting the correct ident.


With router, I cannot directly send in the person ident [:person/id #uuid "xxxx"]


because I would have to say :query [... {:>/person-details1 (comp/get-query PersonTabRouter)}], but unlike (comp/get-query PersonDetails1) which will get the correct person id from the Pathom response, (comp/get-query PersonTabRouter) will receive an empty response (`{}`) from Pathom. This resulted in PersonDetails1 getting an empty person id.


And after reading your conversation with @U0CKQ19AQ, I'm not even sure if I should use dynamic router for my use case

❤️ 1

"Dynamic Routing is not always the only or best solution. Sometimes it is simpler to implement "routing" manually..."


My question now is if I were to handle the details tab routing manually, how can I get the details1 from the URL without breaking the existing dynamic routing I have set up for /person/17?


I know you can get the parsed route segment from (get-in state [::uism/asm-id ::MyRouter ::uism/local-storage :path-segment]), but how to retrieve the residual url that are yet to be parsed?

Jakub Holý (HolyJak)10:01:37

Nice! Yes, I was thinking routers might be an overkill here. And it is great to see me writing (both in the Book and elsewhere :)) is helping people. Regarding your last question, could the route-segment of the parent entity be st. like ["person" :person/id :detail] so that it consumes the whole url? I am not sure it works but it could… If it does then I’d change its :will-enter to extract the detail information and, instead of triggering dr/target-ready after the df/load!, trigger a custom mutation that does trigger df/target ready and also stores the :detail value in the component, i.e. (swap! state (assoc-in (conj <ident> :ui/detail) <the detail>)) and then this component can query for :ui/detail .