Working on adding a “data scrub” preview to Fulcro Inspect

Need to figure out the CSS…probably a bit of restructuring of Inspect itself…but this shows the idea.

@tony.kay If put data in `:initial-state of the defsc, the defcard-fulrco will display the normalized db,

(defsc The-Id [this {:keys [:db/id : :]}]
  {:query [:db/id : :]
   :ident [: :db/id]}
  #_(dom/div nil value))

(def ui-the-id (prim/factory The-Id {:keyfn :db/id}))

(defsc All-Ids [this {:keys [:all-ids]}]
  {:query         [:all-ids {:all-ids (prim/get-query The-Id)}]
   :initial-state (fn [_] {:all-ids
                           [
                            {
                             :db/id
                             17592186045442
                             :
                             "124"
                             :
                             {
                              :db/id
                              17592186045431
                              :db/ident
                              :qs.id.market/深圳
                              }
                             }
                            {
                             :db/id
                             17592186045440
                             :
                             "123"
                             :
                             {
                              :db/id
                              17592186045430
                              :db/ident
                              :qs.id.market/上海
                              }
                             }
                            ]})}
  (dom/div nil (do (js/console.log "aa") (js/console.log all-ids)))
  #_(dom/div nil
    (mapv ui-the-id all-ids)))

(defcard-fulcro card1
  #_(df/load app :all-ids All-Ids)
  All-Ids
  {}
  {:inspect-data true
   :fulcro       {:networking       cs-net
  )

yep…that’s how it is supposed to work

but if use df/load to load data in :started-callback of defcard-fulcro, the :inspect-data true just display the original data without normalization.

(defsc The-Id [this {:keys [:db/id : :]}]
  {:query [:db/id : :]
   :ident [: :db/id]}
  #_(dom/div nil value))

(def ui-the-id (prim/factory The-Id {:keyfn :db/id}))

(defsc All-Ids [this {:keys [:all-ids]}]
  {:query         [:all-ids {:all-ids (prim/get-query The-Id)}])}
  (dom/div nil (do (js/console.log "aa") (js/console.log all-ids)))
  #_(dom/div nil
    (mapv ui-the-id all-ids)))

(defcard-fulcro card1
  #_(df/load app :all-ids All-Ids)
  All-Ids
  {}
  {:inspect-data true
   :fulcro       {:networking       cs-net
                  :started-callback (fn [app]
                                      (wn/install-push-handlers cs-net app)
                                      (df/load app :all-ids All-Ids))}}
  )

my guess is that you’re returning the wrong shape from the server

mege will always merge the data that comes back. Normalization doesn’t work unless the shape of the response matches the shape of the query.

I think you probably want (df/load app :all-ids The-Id)

because my guess is that you’re returning a vector of The-Id instances

All-Ids is your root, but your vector has things that look like The-Id. See ppl make this mistake as beginners often

esp with bad component names (you confuse yourself with the names of things)

yes, I just return a vector.

but a vector of what?

a vector of The-Id

A vector of things that contain the stuff in The-Id I bet

so you have told load you’re loading the All-Id component, but you didn’t return an All-Id data structure, you returned a vector of The-Id component data structures

It cannot read your english or mind…only your code

Think of load (without target) as a load of an edge on the root node (to-one or to-many)

because the :inspect-data true display the return data which add :all-ids key automatically.

:all-ids is part of your root node

which has type All-Id (you wrote it)

You’re not loading All-Id…you’re loading an edge that points to one or many The-Id things

But you told load that you were going to load a (nested) All-Id on that edge instead

Read (load app :edge Component) as “Load one or more Component into the root edge called :edge”

Server must return one or a vector of Component

(load this :people Person) “Load one or more Person into root edge :people” (load this :people Person {:target [:x 2 :people]}) “Load one or more Person into root edge :people, then relocate it to the given path”

@tony.kay sorry for my english, and Thank you very much.

no need to apologize 🙂

It’s easy to get confused until things are practiced

😀

yes, you right, I need more practice.

With fulcro 2 something seems wrong with follow-on reads, we noticed that for the form support it does not really seem to work if you add the query for the form-root key it won't trigger a re-render. So we fixed that by creating an ident and using that. But now we have something that is depending on :my-nav-bar/width and we query for that on two places and it simply isn't triggerin a refresh of that element. we can fix this by just adding idents for everything but that really sucks. Is there some obvious thing we might be doing wrong?

To my knowledge it should find all rendered things find that follow-on-read key and re-render everything that depends on that key

One caveat: the data for that key has to have actually changed. The follow-on read should trigger a check for that, but a refresh will only happen if the data has actually changed.

Otherwise, you found a bug.

It is possible, if you're not giving components Idents that something is wrong with the rendering refresh. I always give my components Idents if they depend on data, because otherwise their mutations are not location Independent.

Note that render optimization doesn't happen unless your components have idents. Refreshing a component without an ident will force a root re-render.

And why would a form, assumedly representing persistent entity data, not have an ident?

@mitchelkuijpers ^^^

It has an ident but the trick with form-root key does not seem to work

Will see if I can reproduce

Thanks. I'm on my phone right now, or I'd spin up and give it a shot. If I don't hear from you I will try to reproduce it when I get the chance.

I tried removing the idents from the targeted mutation refresh demo and it works fine . so I'm unable to reproduce your problem.

No problem will test it out tommorow, I'm also on my phone ;-)

https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c interesting one 🙂

RC4-SNAPSHOT updated on Clojars. To fix the form refs bug I removed legacy code I inherited from Om next that was wrapping inputs. I think it was just for fixing an old react bug with IE. They seem to work better without the wrapping, but just in case, I’ve added a compile-time option that you can enable to get the “old” version. Just set the JVM option -DwrappedInputs on the JVM running the compile, and it will use the old DOM wrapped input code from Om Next.

According to this, the React bug is fixed: https://github.com/facebook/react/issues/7027