How Query Composition With Unions works with parent children tree passed via props in Om Next

Question

I have two components A and B. I want to switch between these two components on the page.

(defui A)
(defui B)

One solution is to use a parent component C:

(defui C
  (render
   (let [{:keys [activeView]} props]
     (if (= activeView 'A')
         (renderA)
         (renderB)))))

The problem is query. C needs to query for both A and B, even though one of them gets displayed.

I need C to either not get involved in query, or query for either A or B only.

Are these true, or are there workarounds:

• A child component can only query its props, which is passed by its parent.
• A parent component has to query for its children so that it can pass them to children.
• Only the root component queries the app-state.

Answer 1

• A child component can only query its props, which is passed by its parent.

  • in your context, yes, it's true. It can, however, access top-level state keys as well by using Links. See this tutorial for more info.

• A parent component has to query for its children so that it can pass them to children.

  • Better put, parent components aggregate their children's queries, composing to the root. The root component needs to have the full query for the application (this is what "queries compose to the root" means)

• Only the root component queries the app-state.

  • Not quite. The root component will get all the props and is responsible for passing them down to sub-components, but the "querying the app-state" itself is done in the parser's read method.

I advise you to do all the tutorials in the Om Next Wiki for better understanding how to do things properly.

Regarding your specific problem, you can always make C implement IQueryParams and have the current sub-component's (either A's or B's) query in a query parameter.