Hello, all! I have a question about how to access data from another component — this is for the toy RSS feed reader I built at https://github.com/realgenekim/rss-reader-fulcro-demo. I’ve been attempting to rewrite it so that the components are better organized, as per @tony.kay suggestions many years ago. I have a new component StoriesTOC that stores all the RSS stories — all-stories is the list of stories, current-story is the “currently selected and displayed story”, and stories-search-results contains a subset of stories that matches a search. In the screenshot, it is shown on the left-hand side.

(comp/defsc StoriesTOC
  [this {:ui/keys [all-stories stories-search-results
                   current-story
                   filter-input]
         :as props}]
  {:ident (fn [x] [:component/id ::StoriesTOC])
   :query [{:ui/all-stories (comp/get-query StoryTitle)}
           {:ui/current-story (comp/get-query FullStory)}
           {:ui/stories-search-results (comp/get-query FullStory)}
           :ui/filter-input]
   :initial-state {:ui/filter-input ""
                   :ui/all-stories []
                   :ui/stories-search-results []}
   :componentDidMount (fn [this]
                        (log/warn :StoriesTOC :mounted!)
                        (df/load! this :story/all-stories StoryTitle
                          {:target        [:component/id ::StoriesTOC :ui/all-stories]
                           :without       [:ui/number]
                           :post-mutation 'com.example.model.mutations/create-prev-story-next-cache}))}
  (log/debug :StoriesTOC :current-story current-story :filter-input filter-input)
  (div
    ,,,

(comp/defsc StoryIndex
  [this {:ui/keys [all-stories]
         :as props}]
  {:query [
           {:ui/all-stories (comp/get-query StoryTitle)}]
   :ident (fn [] [:component/id ::StoryIndex])
   :initial-state {:ui/all-stories []}}
  (dom/div
    (log/warn :StoryIndex :props props)
    (dom/p (count all-stories))))

Thanks for the help on the above, @tony.kay — works brilliantly! You mention that df/load! shouldn’t be done on :componenDidMount — where/when is the best place to do the data load? I see in the docs that you do it on application initialization — is that still the preferred place?

(defn ^:export init []
  (app/mount! app ui/Root "app")
  (df/load! app :friends ui/PersonList)
  (df/load! app :enemies ui/PersonList)
  (js/console.log "Loaded"))

Data load is sometimes tied to the lifecycle of a single component, in which case it is harmless to leverage React as a mechanism for triggering a load. In the cases where rendering doesn’t have a 1-to-1 correspondence with data lifecycle, then IMO there should be some code unit that is responsible for that logic: loading, caching, reloading, clearing, updating. That is not part of Fulcro or React. It is part of your application, and as such, is something you should think about and design. Perhaps a state machine makes sense. Perhaps just hooking function calls onto user-driven events. Perhaps it is a code unit that is triggered by react, but has logic of its own. For example, imagine you put a call to some mutation you’ve written called ensure-data-loaded which knows to 1. check the app state to see if the data is there, possibly checking if it is too stale. 2. possible issues a load if it isn’t there, with well-known marker logic. 3. all UI components that plan on using that data can now have their mount trigger a call to that function. If you’re careful about the logic, then any number of components can call it, and it will trigger at most one load.