Clojurians Log v2

Not able to achieve the only rendering of person 1 At Fulcro 3 Part 5 How Rendering Works, around 13:25, Tony showed that only “Render person 1” with the default (ident-optimized-render), when executing:

(comp/transact! APP [(make-older {:person/id 1})])

Render root
client.cljs:59 Render list
client.cljs:33 Render person 1

(ns app.client
  (:require
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
    [com.fulcrologic.fulcro.dom :as dom :refer [div ul li h3 label]]
    [com.fulcrologic.fulcro.algorithms.merge :as merge]
    [com.fulcrologic.fulcro.rendering.keyframe-render :as keyframe]
    [com.fulcrologic.fulcro.rendering.ident-optimized-render :as ident-optimized]
    [com.fulcrologic.fulcro.algorithms.denormalize :as fdn]
    [com.fulcrologic.fulcro.mutations :as m :refer [defmutation]]
    [com.fulcrologic.fulcro.algorithms.data-targeting :as targeting]))

(defsc Car [this {:car/keys [id model] :as props}]
  {:query [:car/id :car/model]
   :ident :car/id
   :initial-state {:car/id :param/id
                   :car/model :param/model}}
  (js/console.log "Render car" id)
  (dom/div
   "Model " model))

(def ui-car (comp/factory Car {:keyfn :car/id}))

(defsc Person [this {:person/keys [id name age cars] :as props}]
  {:query         [:person/id :person/name :person/age {:person/cars (comp/get-query Car)}]
   :ident         :person/id
   :initial-state {:person/id :param/id
                   :person/name :param/name
                   :person/age 20
                   :person/cars [{:id 40 :model "Leaf"}
                                 {:id 41 :model "Escort"}
                                 {:id 42 :model "Sienna"}]}}
  (js/console.log "Render person" id)
  (let [onClick (comp/get-state this :onClick)]
    (div :.ui.segment
         (div :.ui.form
              (div :.field
                   (label {:onClick onClick} "Name: ")
                   name)
              (div :.field
                   (label "Age: ")
                   age)
              (dom/button :.ui.button {:onClick (fn []
                                                  (comp/transact! this
                                                                  `[(make-older ~{:person/id id})]
                                                                  ))}
                          "Make Older")
              (h3 {} "Cars")
              (ul {}
                  (map ui-car cars))))))

(def ui-person (comp/factory Person {:keyfn :person/id}))

(defsc PersonList [this {:person-list/keys [people]}]
  {:query [{:person-list/people (comp/get-query Person)}]
   :ident (fn [] [:component/id ::person-list])
   :initial-state {:person-list/people [{:id 1 :name "Bob"}
                                        {:id 2 :name "Sally"}]}}
  (js/console.log "Render list")
  (div :.ui.segment
   (h3 :.ui.header "People")
   (dom/ul
    (map ui-person people))))

(def ui-person-list (comp/factory PersonList))

(defsc Root [this {:root/keys [list]}]
  {:query [{:root/list (comp/get-query PersonList)}]
   :initial-state {:root/list {}}}
  (js/console.log "Render root")
  (dom/div
   (dom/h3 "Application")
   (ui-person-list list)))

(defonce APP (app/fulcro-app {:optimized-render! ident-optimized/render!}))

(defmutation make-older [{:person/keys [id]}]
  (action [{:keys [state]}]
          (swap! state update-in [:person/id id :person/age] inc)))

(defn ^:export init []
  (app/mount! APP Root "app"))

(defn get-components-that-query-for-a-prop
  [prop]
  (reduce
   (fn [mounted-instances cls]
     (concat mounted-instances
             (comp/class->all APP (comp/registry-key->class cls))))
   []
   (comp/prop->classes APP prop)))

(comment
  (comp/transact! APP [(make-older {:person/id 1})])
  (get-components-that-query-for-a-prop :person/age)

  (def before (app/current-state APP))
  (def after (app/current-state APP))

  before
  after

  (map
    comp/get-ident
    (get-components-that-query-for-a-prop :person/name))

  (let [state           (app/current-state APP)
        component-query (comp/get-query Person)
        component-ident [:person/id 1]
        starting-entity (get-in state component-ident)]
    (fdn/db->tree component-query starting-entity state))

  )

The only difference may be is the version of Fulcro. I’m using

com.fulcrologic/fulcro {:mvn/version "3.4.14"}

has anyone thought about per-element activity markers? e.g. click a link/button and it turns into a spinner while waiting for a corresponding load/mutation. I was thinking about hooking into the tx processing stuff, but that might be gross and run afoul of f: state -> ui

I think there is a problem with eb/error-boundary and localized css

the :.y class name is expanded in function of the error boundary component instead of the containing component with the {:css [[...]]} section

(mui/grid {:item true
           :xs   12
           :lg   6}
  (err/error-boundary
    (comp/fragment
      (div "bla")
      (styled-paper :.y {}
        (mui/typography :.p
          {:paragraph true
           :color     :textSecondary}
          
          (dom/i "TODO search, filter...")

          )))))

does this make sense?

I am trying to answer this question: When do you need to define :initial-state? My answer so far: 1. When you want to make sure that the component has particular props before any data is loaded from the backend 2. When the component has no state of its own and only queries for global data using {url-book}#linkqueries[Link Queries] 3. When a child component has initial state (f.ex. dynamic routers do) 4. (perhaps) When the component is used as a target of a dynamic router Thoughts? 🙏

Super exciting guys! I’m so impressed with everything you’re putting together. Big shoutout and a thank you for all your amazing work https://www.fulcrologic.com/copilot

are there any fulcro friendly tools for First Run Experience?

@tony.kay I guess the word "tool" is missing from ☝️ after "great" in: > We use them every day in production environments and find them to be a great for solving ?

What is First Run Experience? What kind of tools do you have on mind?

e.g. an interactive overlay to walk you through how to use an interface for the first time. like graying out most of a UI, but highlighting one area with “Click here to manage your account”, then you click next and it will highlight the next thing. mini-tutorial for first-time users.

i thought i had seen some tooling for other web frameworks (like Rails) to manage this with ease but now I can’t seem to find any.

I have not heard about anything like that for Fulcro

The answer is very simple: When the query needs to reach a particular part of the UI graph from the first render frame of the app. The query has the shape of the UI, but it is really a standalone API: The first render is literally passed the props of (db->tree (get-query Root) state state). Link queries dangling off the “edge” of the real data are never fulfilled because db->tree stops evaluating the query when an edge isn’t found. There’s nothing else it can do. An edge could be to-one, or to-many…how is it supposed to “invent” the missing edges?

:thumbsup:

I would appreciate help with my Fulcro tutorial. Is the text and diagram below clear? Useful? Can it be improved? > The image below shows how the query fragments of all components are composed into the Root component’s query and sent to the backend which responds with a tree of data, which is then propagated down from Root to its children and so on. (We omit the role of the client DB here for simplicity.)

When looking at this I’m trying to picture an animation in my head. It’s certainly useful. An improvement could be a series of steps to kind of see how the tree is walked maybe.

I'm trying to refresh a parent from the context of a child, like this:

(comp/transact!! child-this `[(m/set-props ~{:child/value value})] {:compressible? true
                                                                    :refresh [[:parent/id parent-id]]})

I would appreciate the network lines being colored correspondingly, and the data line pointing to the root node directly. also not sure why there's 2 triangles or why some shapes are outlines and some are solid

I love where you're going with this. I also didn't realize right away that the shapes of the component tree on the left correspond to their queries. Have you tried sketching out a version where each component is a box and their queries are yellow shapes inside them? Using shapes instead of keywords is great!

I suspect that would help make it clear that the white shapes don't have queries (if that's correct).

If I understand your response correctly then it conforms the 3 (4) points I wrote above. Right? In particular 2 shows where the UI cannot be reached without the help of initial data.

I do not really understand what "Query reaching a part of the UI" means. Query just is, it doesn't do anything. I guess you mean the process of fulfilling the query from the client DB reaching (and not skipping) a particular part of the query? I also do not comprehend "Query being an API". Sorry 😢

The keyword is: :only-refresh

Sorry, yeah, db->tree is the query API. It runs the query against the db. When it reaches a join that has no corresponding real data then it HAS to stop because there is no info on how to spring such an edge into existence. So, if there is a “link query” deeper in the query from there, it will not been realized, because there is no way to reach it. (sure, it comes from the root, but it’s dangling off in space in the reified graph, so it simply cannot make it’s way to the UI that destructures the result from root). So, that’s what I mean by “query reaching UI”. Your intention when you write a compoentn-local query is that the query processing will “reach the point and fulfill your request”, but if you didn’t connect the graph, then it cannot reach the query that is associated with that part of your UI.

Hi, I want connect fulcro +pathom and datomic, but I don't want use RAD template, if I change here <https://github.com/fulcrologic/fulcro-template/blob/master/src/main/app/server_components/pathom.clj#L54> with a datomic (d/db conn) my parsers from pathom will have access to datomic and will be able to make a pull query ? May someone has an template to share if mee I will be grateful.

Yes, this is great... My only issue is that the final map {triangle} has only one element. it won't compile 🙂

so, if the tree is

a -> b -> c

[:a/id {:a/child [:b/id {:b/child [:c/id]}]}]

{:root/a 1
 :a/id {1 {:a/id 1 :a/child nil}}}

I know that's what you said in #3, but this rule kind of encompass all of your 4 rules.

Thanks a lot for the explanation, Tony!

Same result. I understood :only-refresh as being the desired option when you want to override the default refresh (I.e., the calling component), rather than add to it. Is this a misunderstanding?

Thank you all, great suggestions!

This copilot thing sounds like it has some overlap with Guardrails.

Looks good, you are making some amazing contributions to the Fulcro community lately @holyjak. As a small suggestion, you may want to consider doing the diagrams in something like https://github.com/mermaid-js/mermaid as it lends itself better to version control and alleviates the need to think about styling as much.