Fork me on GitHub
#fulcro
<
2021-06-14
>
jlmr14:06:52

Hi, I’m still pretty new to Fulcro and am now working on my first non-trivial application. The frontend I’m building should render a data entity using different components based on some field in the entity and this is potentially recursive. I suspect I need dynamic queries, but I’m not sure. An example:

(defsc Widget [_this {:widget/keys [type] :as widget}]
  {:query [:widget/id :widget/type]
   :ident :widget/id}
  (case type
    :container (ui-container-widget widget)
    (dom/div (str "Don't know how to render " type))))
For now there is just one type. In this example ContainerWidget should also have access to the attribute :widget/children, which contains more widgets to render as Widget. Hopefully I’ve explained it clearly enough. Any help is very welcome!

Jakub Holý (HolyJak)14:06:48

I assume different types of widget have different data needs? If that is the case then I guess you need to use union queries. If widgets can contain widgets then you need to look into https://book.fulcrologic.com/#_recursive_queries - notice the {:person/children '...} .

jlmr14:06:11

Indeed, different widgets have different data needs and can contain widgets. Thanks for pointing me in the right direction

👍 2
Jakub Holý (HolyJak)14:06:09

Good luck! I will one day need to dive into these myself to be able to write an advanced follow-up to the minimalist fulcro tutorial 🙂

Marcus18:06:52

Hi! I render a form input field using some state as the field value. If I update state on every keystroke it works as expected. If I filter the value (e.g only allow the user to input numbers) the filtered value might be the same across multiple keystrokes. The effect is that there is no state change and thus no re-render and the user can enter garbage into the field. How can I handle this problem?

Marcus19:06:58

Maybe this is not a problem if I use transact!!

tony.kay04:06:27

Yes, synchronous operation is the only way to do an input that transforms things

Marcus19:06:57

I figured out how to use transact!! in combination with StringBufferedInput. Works perfectly. 🙂

❤️ 2