CODEWITHSUNDEEP
clojurere-frame
notan3xit
notan3xit

Reputation: 2436

Initialize re-frame application with state passed through HTTP GET

I am trying to build a self-contained checkout process in Clojure with re-frame, where a list of products gets passed in, is shown a summary of the product details, must enter personal information (e.g. e-mail and delivery address), and the resulting order is passed to an endpoint of the order management component.

The architecture is deliberately picked so that the product list component is self-contained in the same way as the checkout component (from persistence to UI).

Currently, because there is no need to persist the list of products before the checkout is finished, I presume a HTTP GET to the checkout is the best way of integration (passing product IDs or even more product data). However, I am struggling to achieve that using re-frame:

The re-frame template starts the application in the index.html like so:

<div id="app"></div>
<script src="js/compiled/app.js"></script>
<script>myproject.core.init()</script>

...and defines the ring handler to return the static index.html for the "landing page":

(GET "/checkout" [] (resource-response "index.html" {:root "public"}))

Typically, the init() function would now initialize the app-db "from scratch" with default data or some back-end call for persisted state; and then add UI components to the div#app. However, I cannot do that, because the product list I am trying to initialize with is transient and provided from outside, e.g. as parameters with the GET call. I could modify the route to

(GET "/checkout" {qs :params} (resource-response "index.html" {:root "public"}))

in order to obtain them, but how do I pass product IDs contained in qs to my front-end? All possibilities I found so far do not seem particulary elegant:

  1. Read and return the contents from index.html with the call to myproject.core.init() replaced by something like myproject.core.init(product-ids).
  2. Replace the route /checkout by /checkout/* and parse the IDs in the front-end from the *-part.
  3. Persist the product IDs somehow anyway and associate them with the session; retrieve them from the server when initializing app-db.

Is there any better way or possibility to improve one of the solution ideas?

Upvotes: 1

Views: 171

Answers (1)

Svante
Svante

Reputation: 51531

Instead of using a separate index.html file, you could build the main page using hiccup on the server. Then it would not be a problem to insert the list of product IDs into the initialization call. This might have a performance impact, though, that you should measure.

Upvotes: 1

Related Questions