Yes

Is there some documentation or example on this topic?

I’m not sure what the advantage would be. Are you talking about transpiling https://htmx.org/ this kind of stuff and trying to use Fulcro with it?

The whole purpose of Fulcro is to eliminate that kind of entanglement. If you like what htmx does, then use htmx. The answer to your question of “can I make a custom renderer to do X”? The answer is almost certainly yes, but the follow-on question is “Should I?“, to which, in this case, I would probably answer no. As far as examples: There are youtube videos showing custom rendering with Reagent/Reframe. There are docstrings in the code. There is the code itself. The rendering of Fulcro is somewhat tied to react, but you can use it in a headless mode as well. So, if you just want data management you could use it headless, and add a listener to the atom or a hook in the transaction processing to trigger whatever visualization refresh you want.

Thanks for the indepth explanation. I know you are made Fulcro for non trivial web apps. The idea of the EQL queries and the state machine is really interesting so I want to make use of these in general. But sometimes I have a view which is rather simple and another which is more complex. For the simple one I don't want to have to send and evaluate lots of code on the client.

Thanks @U0CKQ19AQ - I have the call to (dr/change-route! main-app ["main"]) So I see the route load, I even see the loading state then the component load. I see the data in the db, but I think I'm not yet fully understanding how query, ident, and initial-state work. Somehow I see all the normalized data and top level root data all-recipes but it doesn't render. Going back through all the videos. Thanks for the response.

oh

your target

you want to target a field, not a component

[:component/id ::main :all-recipes]

you’re trying to overwrite the entire component 😛

and target is a top-level parameter for load, not a post-mutation-params

Oh, wait

I see. You’re telling the router what that component is ready

sorry, small screen crossed eyes

but you do need to ADD :target as a top-level parameter to your load

:target [:component/id ::main :all-recipes] otherwise load doesn’t know where in the graph to put the loaded data, and just defaults to putting it in app root

the beauty of having normalized data is that targeting is always either at the root, or at some field in a normalized entity (so either you don’t need to say it, or it is a 3-tuple of ident + field)

so:

#(df/load app
                                              :all-recipes Recipe
                                              :target [:component/id ::main :all-recipes]
                                              :post-mutation `dr/target-ready
                                              :post-mutation-params
                                              {:target [:component/id ::main]})

looks right

does that fix it?

Unfortunately no, getting some other errors:

[com.fulcrologic.fulcro.routing.dynamic-routing:137] - route-deferred  was invoked with the ident  [:component/id :com.sajb.ui/main]  which doesn't seem to match the ident of the wrapping component (class  function (js_props){
var this$ = this;

(defsc Main [this {:as props
                   :keys [all-recipes]}]
  {:ident         :all-recipes
   :query [{:all-recipes (comp/get-query Recipe)}]
   :initial-state {:all-recipes [{:recipes/id 1
                                  :recipes/name "Blueberry Jam"}]}
   :route-segment ["main"]
   :will-enter (fn [app route-params]
                 (dr/route-deferred [:component/id ::main]
                                    #(df/load app
                                              :all-recipes Recipe
                                              :target [:component/id ::main :all-recipes]
                                              :post-mutation `dr/target-ready
                                              :post-mutation-params
                                              {:target [:component/id ::main]})))}
  (tap> {:all-recipes all-recipes})

  (d/div "All Recipes"
         (when all-recipes
           (d/ol
            (mapv ui-recipe all-recipes)))))

that worked!

I'm sorry I had a missing brace in the args

ok

I got a lot of reading to do :rolling_on_the_floor_laughing: I feel like I understand the high-level but really don't have a good grasp of the specifics

That is the main hurdle to understanding I/O in Fulcro. Loads (and mutation return values) have to be targeted unless all you care about is the normalized data.

When you load, you’ll always get the normalized data, as long as your resolver returns it with the right shape. But, if you want to join that loaded data into your UI graph you have to tell it “where”

which is targeting. That’s really all there is to it

so I could write a full-stack mutation like “gen-recipe” that returns a Recipe. I could then write a mutation with:

(defmutation gen-recipe [_]
  (remote [env] (m/returning env Recipe)))

I see, I think the thing I'm struggling with is that I look at the local db, and I was thinking - that is the ultimate source of rendered truth, that somehow when that updates, all queries will always rerender. Am I misunderstanding though?

yes, but the queries are relative to the component, not the root

only the root component reads root keys

you can include a link query if you want to read root keys, but I don’t recommend that in a case like this

I see, so it's because this is a root key, we need to add the target

no

not quite

It’s because your component’s key is NOT a root key

it is a property of THAT component

just because you named it the same doesn’t make magic happen

Fulcro does almost no magic

Open up component/id ::main in there

that :all-recipes I thought this was a root key

you’ll see there is an all-recipes in there as well now

ahh

so this component is not actually using the :all-recipes data?

df/load defaults to putting things in root, but componetns do NOT read from there

I fyou reload your app

you won’t see that root key anymore

you’re seeing a prior load before you added targeting

You can also do this: https://book.fulcrologic.com/#_link_queries but be sure to read the warnings (and use sparingly…this isn’t how it is intended to be done most of the time)

I see it's gone now yes. So is this the idiomatic way of loading a master list like this?

Should I try to read from :root/all-recipes instead?

If you have some master list that should be shared all over the place, then putting it in root and using a link query is what you should do

otherwise if I have a top level nav. Recipes | Settings | Account and recipes first displays a master list of all recipes, and then selecting one opens details. In this flow, would top level :root/all-recipes be the goal? Or targeting is better?

:query [{[:root/all '_] (comp/get-query Recipe)}] but again be sure to read the warnings..you must have initial state or that won’t work

the answer is “it depends”, of course 😄

haha ok. I'm going to dig back into the docs and vids. Really appreciate the lesson Tony. Thanks again for the amazing work

I personally would localize the data to a component. That would let me do things like play with pagination and incremetal loadings, etc.

Excellent, this opened many questions, but I have a better sense now of what's happening

The primitives are just that: primitive 🙂

@U0522TWDA This is an excellent resource. Thank you for this.