Fork me on GitHub

I’ve fixed the bug in Inspect with network/EQL where quotes were getting lost so that “Send to EQL” was sort of a pain to use. I’m building the chrome store extension now

❤️ 9

Version 3.0.3 of Chrome extension submitted for review.

Aleksander Rendtslev23:12:08

I’m sorry if this is something obvious I’ve missed but I’ve been stuck on this for a few hours: I can’t seem to load initial-state in my sub components (defined with defsc). Eg:

(defsc EntryPanel [_ {:user/keys [name]}]
  {:query [:user/name]
   :initial-state {:user/name "Aleksander"}
   :ident (fn [] [:component/id :entry/panel])
  (ui/view {:style (tw :w-full :flex-1 :p-5 :align-start :justify-start)}
             (ui/text {:style (tw :text-sm :mb-1 :text-primary)} "Mon, Nov 17")
             (ui/text {:style (tw :text-2xl :mb-2 :text-primary)} (str  "Good morning, " (.stringify js/JSON params)))
             (ui/text {:style (tw :text-lg :text-primary)} "What did you eat today??")

(def ui-entry-panel (comp/factory EntryPanel))

// In root:
(defsc Root [_ {:root/keys [random]}]
  {:query [:root/random]
   :initial-state {:root/random "Yo Bro"}}
    {:style (tw :items-center :px-0 :justify-center
                :bg-white :flex-1 :h-full :flex-col)}
    (ui-entry-panel {})))
• Nothing shows up in the database in fulcro inspect for EntryPanel (or rather :user/name doesn’t show up) • It’s not in the parameters I’m printing on the screen either • :root/random does work exactly as expected • the initial state dooes show up when I explicitly call (comp/get-initial-state EntryPanel {}) in the repl


has to be composed to root @aleksander990


initial state is about the very first animation frame in the entire program, and is a complete graph from root


it is not a constructor


use mutations and loads to join run-time objects into the view graph. Fulcro uses (by default) a complete reified data graph of the view


it is literally View = F(state)


if you want to “hang” a floating root (not connected in data graph) in your UI, you use the multi-root renderer. There’s a demo of that in the workspaces of Fulcro…and I think it’s documented in book.

Aleksander Rendtslev23:12:53

Arhh, ok. I think it’s startinng to make sense

Aleksander Rendtslev23:12:18

So basically this:

(defsc Root [_ {:root/keys [entry-panel]}]
  {:query [:root/entry-panel]
   :initial-state {:root/entry-panel (comp/get-query EntryPanel)}}
    {:style (tw :items-center :px-0 :justify-center
                :bg-white :flex-1 :h-full :flex-col)}
    (ui-entry-panel entry-panel)))


FYI If you upgrade to the latest Fulcro (which is safe to do), you will get better error checking that would prevent you from mixing a template-form init. state with function calls.


common misunderstanding. I need to write a 3 page “things you MUST know” doc 😜

🙏 3
Aleksander Rendtslev23:12:00

I’m planning on writing a small internal one for new engineers as I bring them on board. So I hope I’ll be able to give something back to this amazing project you’ve built

👍 3

95% of beginner problems are: didn’t fully grok query/ident/initial-state basics. There’s actually very little to them…it might be helpful to watch this old whiteboard talk I gave on “Untangled”, back when Om Next was still part of the internals. This is probably true for most ppl, I just hate recommending it when it isn’t right for F3, but the GRAPH info and initial state stuff has not changed (though the API and internals are a bit diff):;list=PLVi9lDx-4C_T_gsmBQ_2gztvk6h_Usw6R&amp;index=8&amp;t=1578s&amp;ab_channel=TonyKay

🙌 15

I really need to redo that video and bring the API and terminology up-to-date…is so very useful I think.

Aleksander Rendtslev20:12:06

@U0CKQ19AQ this was really great. Super nice way to understand the basics. I feel like I have a much better grasp on how everything fits together


I just don’t have a whiteboard right now, or I’d do it over…it’s the right thing for beginners

Aleksander Rendtslev20:12:54

Absolutely. I had a mental disconnect between the view nodes in the graph and the data that's loaded. It makes a lot of sense to explicitly connect the data to views (as opposed to doing a filter on every render over the entirety of the data). I took a bunch of note that I expect will help future team members

Aleksander Rendtslev20:12:25

And understanding why I need to go through the root to initiate app state makes a lot more sense now as well


no, get-initial-state


not get-query


you do need to join the query too


and initial-state has magic (it can use query)


i.e. {:root/entry-panel {}} === (fn [params] {:root/entry-panel (get-initial-state EntryPanel {})})

Aleksander Rendtslev23:12:47

Like this?

(defsc Root [_ {:root/keys [entry-panel]}]
  {:query [:root/entry-panel]
   :initial-state {:root/entry-panel {}}}
    {:style (tw :items-center :px-0 :justify-center
                :bg-white :flex-1 :h-full :flex-col)}
    (ui-entry-panel entry-panel)))

Aleksander Rendtslev23:12:14

It worked when I did it with get-initial-state explicitly but the “short-hand magic” doesn’t seem to

Aleksander Rendtslev23:12:17

do I then do this down in EntryPanel

(fn [params] {:root/entry-panel (get-initial-state EntryPanel {})}) 


just a shorthand, but super handy…also works in to-many rels


{:root/entry-panel [{:id 1} {:id 2} {:id 3}]} === `(fn [params] {:root/entry-panel [(get-initial-state EntryPanel {:id 1}) (get-initial-state EntryPanel {:id 2} ...]})`

Aleksander Rendtslev23:12:01

Thank you, by the way. Unblocked and moving forward. This is awesome. And the inspect tool is a game changer