Using a fulcro root element from a devcard as a child in a union query (e.g. page router)

widgets.cljc

(ns myapp-from-template.widgets
 (:require [fulcro.client.cards :refer [defcard-fulcro]]
           [fulcro.client.primitives :as prim :refer [defsc defui]]
           [fulcro.client.dom :as dom] 
           [fulcro.client.mutations :as m :refer [defmutation]]))

(enable-console-print!)

(def widgets [{:name :red :color "red" :label "danger"}
              {:name :green :color "green" :label "safe"}
              {:name :orange :color "orange" :label "caution"}])

(defmutation select-widget
  [{:keys [name]}]
  (action
    [{:keys [state]}]
    (swap! state assoc-in [:selected-widget] name)))

(defsc WidgetButton
  [this 
   {:keys [name color label]}
   {:keys [selected-widget select-widget]}]
  {:initial-state (fn [{:keys [name color label]}] {:name name :color color :label label})
   :query [:name :color :label]
   :ident [:widget-button/by-name :name]}
  (dom/div {}
    (let [style (if (and selected-widget (= selected-widget name)) {:style {:backgroundColor color}})]
      (dom/button (merge  {:onClick #(select-widget name)} style) label))))

(def ui-widget-button (prim/factory WidgetButton {:keyfn :name}) )

(defsc WidgetRoot [this {:keys [widget-buttons selected-widget]}]
  {:initial-state (fn [_] {:id :my-example :selected-widget nil :widget-buttons (into [] (map #(prim/get-initial-state WidgetButton %) widgets))}) 
   ; :ident         (fn [] [:my-example :page])
   :query         [:id :selected-widget {:widget-buttons (prim/get-query WidgetButton)}]}
   (let [select-widget (fn [name] (prim/transact! this `[(select-widget {:name ~name})]))]
     (dom/div
       (map #(ui-widget-button (prim/computed % {:select-widget select-widget
                                                 :selected-widget selected-widget})) widget-buttons))))

(defcard-fulcro Widgets 
  WidgetRoot 
  {}
  {:inspect-data true})

The component above works as-is in devcards. Note the root component ident is commented out - that will be needed for use in a union query but including in a devcard breaks the card.

The trick is to remember the path to the mutation target is not at the top-level when the component is included in a union query. The assoc-in must use the whole path, e.g. [:my-example :page :selected-widget] in the case shown.