Clojurians Log v2

I have a few questions regarding the Fulcro book. First, in Ch. 2.5.1, should (merge/merge-component! app Person {:person/id 11 *...*} :append [:list/id :friends :list/people]) instead be adding this to the graph {:list/id {:friends {:list/people [*...* [:person/id 11]] ~:list/id :friends *...*~}} :person/id {11 {:person/id 11 *...*}}}, i.e. without the strikethrough portion?

Secondly, in Ch. 3.5.1 and Ch. 4.1, both contain an important section about using reader conditional to pull in proper server DOM functions. However, I cannot find com.fulcrologic.fulcro.dom-server namespace. Also, Ch. 4.1 mentions fulcro.client.dom which does not exist. Is the reader conditional still required?

Lastly, a small typo. In Ch. 4.1 {:style {:colour :red}} should be {:style {:colour "red"}} instead. Thanks.

The striked through portion is supposed/required to be there from before. I guess it could be removed from the example if it is confusing. http://Fulcro.client.com should be com.fulcrologic.fulcro.dom I believe. Do you want to send a PR to fix it?. The dom-server ns is right here https://github.com/fulcrologic/fulcro/blob/develop/src/main/com/fulcrologic/fulcro/dom_server.clj Are you sure the color prop is a typo? Eg for classes both string and keyword values are supported.

@tony.kay this sentence looks wrong > Fulcro is designed to be fast enough that then your application should be fast enough to do database updates on every keystroke, > but I'm not sure what is the right correction. Perhaps drop the 2nd line? > Fulcro is designed to be fast enough that then your application should be fast enough to do database updates on every keystroke,

Thanks @holyjak for your reply. 1) The strike is added by me and not in the book, so it would be great to know which version is correct and just keep the correct one. 2) Found the dom-server ns, overlooked it, thank you. Since you are already familiar with the PR, would you mind helping with the PR for the typos when you have the time? Much appreciate it. 3) I think the colour prop is a typo because I cannot get it to work in the keyword form. It has to be in string format to my understanding. 4) I found another typo which can be grouped into 1 typo PR. Details to come below.

In Ch. 3.9.1, as shown in the screenshot below and indicated by the green arrow:

To make a PR just go to https://github.com/fulcrologic/fulcro-developer-guide/blob/master/DevelopersGuide.adoc and click on the edit icon, make the changes, click the buttons. In 1) neither is wrong. The :list/id is not added by the merge but is shown, together with the... to hint about the pre-existing data.

It seems you are right about the delete-person. A little later it is defined as (defmutation delete-person "Mutation: Delete the person with :person/id from the list with :list/id" [{list-id :list/id person-id :person/id}]..

Thanks, @holyjak. To complete my message above regarding the other typo, the green-underlined part should be {:list/id id :person/id person-id}, or following the flow of the book, it should still be {:list-name label :name name} before the later changes are introduced.

I believe the former

In https://book.fulcrologic.com/#_initializing_a_tree_of_data, it says:

Normally you might throw this into your application state with something like:

(merge/merge-component! app PersonForm person-tree)

which will insert and normalize the person and phone number.

If you also are supporting form interactions then you can augment the form with form configuration data like so:

(def person-tree-with-form-support (fs/add-form-config PersonForm person-tree))
(merge/merge-component! app PersonForm person-tree-with-form-support)

(defsc NoteForm [this {:note/keys [id text] :as props}]
  {:query [:note/id :note/text fs/form-config-join]
   :initial-state {:note/id (tempid/tempid) :note/text ""}
   :ident :note/id
   :form-fields #{:note/text}}
  ...)

You call merge-component! (or its non ! version) inside of a mutation. Every function that works on the app state usually belongs in a mutation.

(defmutation add-note [{:note/keys [id text]}]
  (action [{:keys [app]}]
    (mrg/merge-component! app Note #:note{:id id :text text} 
      :append [:all-notes]))) ; this is optional, but I want to show you how to use targeting.

Okay, so I'm calling the mutation like this:

(comp/transact! this [(save-note #p props)])

(defmutation save-note [{:note/keys [id text] :as props}]
  (action [{:keys [state]}]
    (swap! state
      (fn [s] (log/info "Saving Note with" id)
              (->
                (fs/add-form-config* s (comp/registry-key->class :buidler.ui/NoteForm) [:note/id id])
                (save-note* id text)
                (targeting/integrate-ident* [:note/id id]
                                            :append [:note-list
                                                      :singleton
                                                      :note-list/notes]))))))

It still tells me that my form state is not normalized, and I can't figure out how to reset the NoteForm to have a new tempid (so I can start adding a new note by inputting text) after a successful save.

So.. I wouldn’t use tempids for ui Stuff. It is used as a placeholder to have an ID in the UI until a remote mutations returns the real id.

Isn't that what I'm doing? I'm providing the form with a placeholder :note/id until the remote returns a real id.

I myself use a singleton ident :ident (fn [] [:form :new-note]) or hooks.

(defsc NoteForm [this {:note/keys [text]}]
  {:query [:note/text]
   :initial-state {:note/text ""}
   :ident (fn [] [:form :new-note]
  (dom/form {:onSubmit 
              (fn [e]
                (evt/prevent-default! e)
                (comp/transact! this 
                  [(save-note #:note{:id (tempid/tempid) :text text})
                   (reset-form)]))}
    (dom/input 
      {:type "text"
       :value text
       :onChange #(m/set-string! this :note/text :event %)})
    (dom/button {:type "submit"})))

Yesterday Tony said that forms are rarely singletons https://clojurians.slack.com/archives/C68M60S4F/p1607198211111400?thread_ts=1607189486.108400&cid=C68M60S4F am I misunderstanding?

I have to admit, that I do not use the form-state support. I don’t have big forms with non-empty initial states. As I said you also could use hooks:

(defsc NoteForm [this _]
  {:use-hooks? true}
  (let [[text set-text!] (hooks/use-state "")
        handle-submit
        (hooks/use-callback
          (fn [e]
            (evt/prevent-default! e)
            (comp/transact! this
              [(save-note #:note{:id (tempid/tempid) :text text})]))
          [text])
        handle-text-change (hooks/use-callback #(set-text! (evt/target-value %)))]
    (dom/form
      {:onSubmit handle-submit}
      (dom/input
        {:type     "text"
         :value    text
         :onChange handle-text-change})
      (dom/button {:type "submit"} "Submit"))))

And I wish Slack had some sort of code highlighting…

It does when you post a snippet and select the language, but there's no highlighting when you just use a preformatted code block (three backticks).

Hm. ok. For work I use Mattermost and there I just can write three backticks and then the name of the language. Just like Markdown.

I don't want to go down the hooks route just yet. My objective should be possible without using hooks, and hooks are fairly new to me. I can get my note to save, and I don't actually think I need form state support yet, but why does it keep complaining that my form isn't normalized?

> Just like Markdown. Yeah, would be nice to get that in Slack.

The FORM NOT NORMALIZED error comes up in by onBlur where I call fs/mark-complete!:

I guess fs/mark-complete! is a form state function so I have to fs/add-form-config* prior to calling that. But m-c! is in my onBlur, so I'm not sure where I could have added the form config prior to that. I have the fs/form-config-join in my query, the form component has an ident... what am I missing here?

Hm… What does your DB look like? You get FORM NOT NORMALIZED when there insn’t an ident in (conj entity-ident ::fs/config)

:note-form :singleton ::fs/config

How do you use NoteForm ?

I just compose it in at the root

You don’t call (comp/get-initial-state NoteForm) in Roots initial-state

No, but doing so still doesn't get rid of the normalization warning.

Same result

Actually, I think that using initial-state in template mode, :initial-state {:root/note-form {}} is equivalent to :inital-state (fn [] {:root/note-form (comp/get-initial-state NoteForm}).

When I call (comp/get-initial-state Root) after refreshing with my template-mode code in place, the result is:

{:root/note-form {:note/text ""}, :root/note-list {}}

I am not really sure how this all works…

There shouldn’t be this in your state… 😕

:com.fulcrologic.fulcro.algorithms.form-state/complete? #{:note/text}

Well it should. But not under your ident..

I have no idea what is going on. Sorry

All good. Thanks very much for trying to help out. I'm not ready to admit defeat just yet, going to keep at it.

@tony.kay I loved your interviews with @jacek.schae, as well as those of @wilkerlucio, who helped me have my “aha” moment — after listening to all of them, as well as watching hours of your two Fulcro RAD videos, I’m ready to take the plunge on my first Fulcro app! This is after spending over 10 hours getting my first couple of Pathom queries working with a set of Vimeo APIs I built (thx to @wilkerlucio and @pithyless for the help in #pathom!) I’ve spent about four hours yesterday playing with the Fulcro RAD demo, and managed to add my Datomic Cloud instance, and even managed to get my first queries against it working..

(let [db (d/db (:video datomic-connections))]
    (d/q '[:find (pull ?s [*])
           :where
           [?s :session/title _]] db))

dev:cljs.user=> (fdn/db->tree [{:friends [:list/label]}] (comp/get-initial-state app.ui/Root {}) {})
{:friends {:list/label "Friends"}}

HI, @randumbo — I know the feeling! I put 14 hours into Pathom adapter around Vimeo (for just two API calls), and my first 4 hour chunk into Fulcro RAD. They both seem to require understanding a vast surface area of machinery, (and corresponding scaffolding that must be correct) for things to work. My impressions so far: the promised payoff seems very high, but at least for me, it requires lots of global understanding of the system, even to do small things. I’m hoping that key understandings will come more frequently after these initial hurdles. 🙂 (I’m watching this thread closely, because I’m hoping to be tackling this same problem you’re describing here hopefully in a couple of days! 🙂

@genekim thanks, glad to know I'm not alone in having some troubles ramping up. I have the same impressions as yourself. I've read much of the book, but while I can see the beauty in Fulcro's approach, I'm not yet able to command it. I mostly chalk up the difficulty to how different the concepts are from the frameworks I'm used to. I also think (hope) that once I get over the learning curve a bit, the payoffs will be there. Fulcro has not been easy to learn, but the strength of the community is very supportive and encouraging. I'll ping you when I figure out the solution to my problem 🙂

For sure. I’ve watched the Fulcro RAD video twice, and certain portions numerous times, squinting at what is being typed. FWIW, Pathom was even more difficult, because it seems like it usually benefits from Fuclro doing all the set up work! 🙂 But I had to watch a bunch of demo videos just to figure out what was going on. I felt like this. 🙂 https://twitter.com/towernter/status/1332692092863340544

PS: @randumbo: any chance you’ve figured out how to call the resolvers manually from the REPL yet? 🙂

@genekim I think so... I don't call them directly, but you can pass the query to your api-parser like shown at the very bottom of this section https://book.fulcrologic.com/#_parsing_queries

Funny! I had seen that last night, and took a screenshot of it… It looks like what I need, but in RAD, I think it’s no longer exposed. Going off searching for it! Thx!

lol yes, that's pretty much how it feels watching pros do their thing and trying to replication. I was actually thinking maybe it would be easier to just try playing around with Pathom on its own, but sounds like that might not be the case.

I haven't yet started experimenting with RAD. I figure it's better to learn Fulcro proper if I'm committed to getting good at this stuff. I'm usually a bottom-up learner anyway.

…a great idea. I think I’m going to restart using the Fulcro template. I’ll keep you posted, especially when I get queries working and tackle creating new entities!

PS: maybe after we get a little further, wanna collaborate on a “experience report of trying to use Fulcro” — it would be additional motivation for me to make sure I actually write it all down.

I would recommend sticking with RAD. I don't think something can be "not exposed" there, it only adds to Fulcro, removes nothing. Essentially it is Fulcro + a library. You can call a resolver certainly, look at it - it is just a map that includes the fn you want to call. But I would call the whole parser normally, you just need to figure out the env. In my case the only thing of consequence in it is the DB connection pool, which the development ns can give me. Even if you lack app.parser/api-parser, you have a pathom parser somewhere. Yes, here is it https://github.com/realgenekim/fulcro-rad-demo/blob/master/src/datomic/com/example/components/parser.clj#L24

But you say that you are able to call parser/parser for the sessions query, right? Any reason why you want to call the resolver directly rather than through the parser? It is just a fn as I wrote so you certainly can do that easily...

Here https://gist.github.com/holyjak/da15f613376bf7015385a7cd899ee3e8#troubleshooting-facilities is shown how to call db->tree including arguments

(Aside: thank you so much for the Phoenix Project and your Love letter to Clojure, I enjoyed both tremendously and recommend them widely. Some P. P. characters gave nicknames to some of our colleagues (sometimes just in private conversations though :))