This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-28
Channels
- # asami (5)
- # babashka (44)
- # beginners (22)
- # biff (7)
- # clerk (86)
- # clj-kondo (5)
- # clojure (33)
- # clojure-europe (8)
- # clr (6)
- # community-development (2)
- # fulcro (20)
- # graalvm (5)
- # graphql (1)
- # hugsql (3)
- # integrant (5)
- # java (11)
- # joyride (2)
- # leiningen (4)
- # malli (12)
- # nbb (15)
- # off-topic (28)
- # pathom (23)
- # reitit (8)
- # releases (1)
- # sci (6)
- # shadow-cljs (39)
- # tools-deps (15)
- # tree-sitter (1)
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]}
(div
"HELLO!"
(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]}
(div
"HELLO!"
(fPersonRouter props)))
How would you structure your components to get something like the above (with working routing)?
Placeholders, as discussed in https://blog.jakubholy.net/2020/fulcro-divergent-ui-data/#_a_data_entity_spread_across_multiple_sibling_components?
@U0522TWDA I can't seem to make it work with dynamic routers. The PersonDetail
component always receives [:person/id nil]
as the ident.
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?
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.
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.
This section solved one of the problems for me: https://book.fulcrologic.com/#_composing_the_routers_state_into_the_parent
And after reading your conversation with @U0CKQ19AQ, I'm not even sure if I should use dynamic router for my use case https://clojurians-log.clojureverse.org/fulcro/2021-09-18
In fact, you said well yourself: https://fulcro-community.github.io/guides/tutorial-advanced-minimalist-fulcro/index.html#_routing
"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?
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
.