Say I have a component which needs to request some data from server before rendering.
What I have now is something like with cljs-ajax library:
(def data (r/atom nil))
(defn component [id]
(r/create-class {:reagent-render simple-div
:component-did-mount (partial get-data id)}))
(defn get-data [id]
(GET (str "/api/" id)
{:handler init}))
(defn init [response]
(let [data1 (:body response)
data2 (compute data1)
data3 (compute2 data2)]
(reset! data (compute3 data1))
(.setup #data data1)
(.setup2 #data data2)
(.setup3 #data data3))
the setup functions are some foreign JS library functions with side effects.
This works but I don't feel like this is the correct way to do callback.
Not to mention if I need to GET other datas based on the first data I got, and then other datas based on that, it would be a very nasty chain of callbacks.
Is there a better, clean way of doing this kind of ajax request in reagent/clojurescript?
The most common way to make requests is cljs-http. Add [cljs-http "0.1.39"] to the dependencies in project.clj and restart the figwheel process in the terminal to pick up the new dependency.
(ns my.app
(:require
[cljs.core.async :refer [<!]] [cljs-http.client :as http])
(:require-macros [cljs.core.async.macros :refer [go]])
(go (let [response (<! (http/get "data.edn"))]
(prn (:status response))
(prn (:body response))))
Cljs-http is a nice way to manage HTTP requests. It uses core.async channels to deliver its results. For now, all you need to focus on is that http/get and http/post calls should occur inside a go form, and the result is a channel that can have its result read with
Dependent http gets can be chained together in a sensible way in a single go block that looks like sequential code, but occurs asynchronously.
Related
Is there a way in Clojurescript create an async function or a macro wrap a function into a Promise to simulate it?
My current use-case is to replace the following function that takes a callback by its async version - btw this is for an AWS lambda function.
// Old style
function(args, callback) {
// Use callback(e) for errors
// Use callback(null, value) for the result
}
// New style
async function(args) {
return value; // success path
throw new Error(); // error path
}
Given that this is Clojurescript, using await is not the question. And I know this can simply return a Promise to comply with the async requirement.
So it resolves to some sugar code to create the Promise, catch all errors for me and calling resolve on the happy path or reject otherwise.
Browsing through clojure.core.async and docs -including the clojurescript reference, I haven't found anything.
Node 8 and newer ship with util.promisify that does what you want:
Takes a function following the common error-first callback style, i.e. taking a (err, value) => ... callback as the last argument, and returns a version that returns promises.
EDIT: I spent a bit writing a macro that does promisify and I'm safisfied with the result. Note that the macro needs to be saved in a CLJC file:
;; macros.cljc ;;;;;;;;;;
(ns server.macros)
(defmacro promisify [method obj params]
`(js/Promise.
(fn [resolve# reject#]
(~method ~obj ~params
(fn [err# result#]
(if err#
(reject# err#)
(resolve# result#)))))))
;; main.cljs ;;;;;;;;;;
(ns server.main
(:require-macros [server.macros :refer [promisify]])
(:require ["aws-sdk" :as aws]))
(defn main! []
(println "App loaded...")
(let [creds (aws/SharedIniFileCredentials. #js {:profile "example-profile"})
_ (set! (.-credentials aws/config) creds)
s3 (aws/S3.)]
(-> (promisify .listBuckets s3 #js {})
(.then #(println "DATA:" %))
(.catch #(println "ERROR:" %)))))
and the output is the same as before:
$ node target/main.js
App loaded...
DATA: #js {:Buckets #js [#js {:Name demo-test-bucket, :CreationDate #inst "2019-05-05T17:32:17.000-00:00"} #js {:Name subdomain.mydomain.com, :CreationDate #inst "2019-06-19T04:16:10.000-00:00"}], :Owner #js {:DisplayName username, :ID 9f7947b2d509e2338357d93e74f2f88a7528319ab3609b8d3b5be6b3a872dd2c}}
The macro is basically a Clojure version of this code.
EDIT 2: There's also this library that could be interesting if you really want to use core.async too.
I am making an HTTP request:
(defn main-panel []
(def API-URL "https://api.chucknorris.io/jokes/random")
(defn getFileTree []
(go (let [response (<! (http/get API-URL
{:with-credentials? false
:headers {"Content-Type" "application/json"}}))]
(:status response)
(js/console.log (:body response))))) ; prints a very complex data structure
(go
(let [result (<! (getFileTree))]
(.log js/console (:body result)))) ; prints null
:reagent-render
(fn []
[:h1 "kjdfkjndfkjn"]))
But I can't get to the "joke" in the returned object, array item 13:
How do I assign this value to a let or def?
Also, why does the second console.log print null?
Update
I am now moving on from using reagent atoms to reframe.
This is my component that successfully GETs data, updates the re-frame 'database':
(defn main-panel []
(def API-URL "https://api.chucknorris.io/jokes/random")
(def request-opts {:with-credentials? false})
(defn getFileTree []
(go (let [response (<! (http/get API-URL request-opts))]
(re-frame/dispatch [:update-quote response]))))
(defn render-quote []
(println (re-frame/subscribe [::subs/quote])) ;successfully prints API data as in screenshot below
(fn []
(let [quote-data (re-frame/subscribe [::subs/quote])
quote-text (if quote-data (:value quote-data) "...loading...")]
[:div
[:h3 "Chuck quote of the day"]
[:em quote-text]])))
(fn []
(getFileTree)
[render-quote]))
But this is the object I get back from the re-frame database:
As you can see it comes wrapped in the Reaction tags and I can't access the body or value any more. How do I access those?
I have a small working version using the reagent template. Create a new project (assuming you have Leiningen installed) with: lein new reagent chuck. This will create a project with many dependencies, but it works out of the box.
Next, edit the file at src/cljs/chuck/core.cljs and edit it so it looks like the following:
(ns chuck.core
(:require-macros [cljs.core.async.macros :refer [go]])
(:require [reagent.core :as reagent :refer [atom]]
[cljs-http.client :as http]
[cljs.core.async :refer [<!]]))
(def api-url "https://api.chucknorris.io/jokes/random")
(def request-opts {:with-credentials? false
:headers {"Content-Type" "application/json"}})
(def api-response (atom nil))
(defn get-quote []
(go
(let [response (<! (http/get api-url request-opts))]
(println response)
(reset! api-response response))))
(defn render-quote []
(fn []
(let [quote-data (:body #api-response)
quote-text (if quote-data (:value quote-data) "...loading...")]
[:div
[:h3 "Chuck quote of the day"]
[:em quote-text]])))
(defn quote-page []
(fn []
(do
(get-quote)
[:div
[:header
[render-quote]]
[:footer
[:p "footer here"]]])))
;; -------------------------
;; Initialize app
(defn mount-root []
(reagent/render [quote-page] (.getElementById js/document "app")))
(defn init! []
(mount-root))
I'll explain the relevant bits:
init will bootstrap the basics of the front-end, but in our case it's just calls mount-root which starts reagent telling it to call quote-page and placing the results in the DOM replacing the element with the ID of app.
quote-page calls get-quote which will call the API using the cljs-http library. I'm not checking for errors here, but basically when the request completes (either success or error) it will read the results from the channel (using <!) and place the response in response. The key is that response is a nested ClojureScript map that you can inspect to check if the result was successful or not. Note that I'm also printing the results with println instead of JS interop (.log js/console xxx) because console.log will show the inner details of how the nested map is implemented, which is not relevant for this case.
One the response is available, I store the results of the response in an atom called api-response. The key here is that the atom will contain nothing for a bit (while the request completes) and then the response will be inside it and reagent will take care of detecting the change and re-rendering.
Finally, quote-page calls render-quote which generates the markup for rendering the quote or a placeholder while it loads.
To run the whole thing, open a terminal and run lein run which will start a web server listening on port 3000 by default. In another terminal, run lein figwheel which will compile the ClojureScript code for you. One figwheel is ready it will start a REPL, and you can open the address http://0.0.0.0:3000/ in your computer to view the page.
Questions
My webpage only has the output: {:user {}} with the following code.
(ns omn1.core
(:require
[om.next :as om :refer-macros [defui]]
[om.dom :as dom :refer [div]]
[goog.dom :as gdom]))
(defui MyComponent
static om/IQuery
(query [this] [:user])
Object
(render
[this]
(let [data (om/props this)]
(div nil (str data)))))
(def app-state (atom {:user {:name "Fenton"}}))
(defn reader [{q :query st :state} _ _]
(.log js/console (str "q: " q))
{:value (om/db->tree q #app-state #app-state)})
(def parser (om/parser {:read reader}))
(def reconciler
(om/reconciler
{:state app-state
:parser parser}))
(om/add-root! reconciler MyComponent (gdom/getElement "app"))
When I check the browser console, I notice that my query is nil. Why
doesn't it get passed into my reader function?
This comes from a motivation to keep my code to a minimal # of LOC as possible, and also DRY. So I'd like to have one read function that will work with a properly set up database, and normal nominal queries. If you pass regular queries to om/db->tree indeed db->tree does this. db->tree will take any proper query and return you a filled out tree of data. Maybe another way to phrase the question is can someone demonstrate a reader function that does this? I.e. leveraging db->tree to resolve the value of a query. I don't want to write a custom reader for each query I have. If all my queries obey the regular query syntax AND my DB is properly formatted, I should be able to use one reader function, no?
The example provided in the om.next quick start - thinking with links doesn't work:
(defmethod read :items
[{:keys [query state]} k _]
(let [st #state]
{:value (om/db->tree query (get st k) st)}))
as stated before query is nil sometimes, and the 2nd and 3rd arguments are different from what is proposed as how to use this function from the tests which all use: st for both 2nd and 3rd arguments. Confused.
From the Om.Next Quick Start tutorial (https://github.com/omcljs/om/wiki/Quick-Start-(om.next)), read has this signature:
[{:keys [state] :as env} key params]
So there is no access to a query data structure.
Usually the setup is to have a multimethod for each query, and use the query's params to return some part of the state:
(defmulti read (fn [env key params] key))
(defmethod read :animals/list
[{:keys [state] :as env} key {:keys [start end]}]
{:value (subvec (:animals/list #state) start end)})
Here :animals/list is the key of the query. So this is how you can access the key and params of the query.
How can I submit multipart/formdata in ClojureScript? Is there any library that supports this? I can fallback to e.g. jquery.form.js but would prefer a plain ClojureScript solution.
I recently made a pull request to cljs-http to support form-data. Util r0man merges it, you can see instruction in my version's README at https://github.com/myguidingstar/cljs-http
Edited: The pull request has been merged. See the original repository instead.
This is how I did it:
(defn generate-form-data [params]
(let [form-data (js/FormData.)]
(doseq [[k v] params]
(.append form-data (name k) v))
form-data))
(defn upload [file]
(go (let [response (<! (http/post "http://localhost/upload"
{:body (generate-form-data {:file file})}))]
(prn (:status response))
(prn (:body response)))))
;; some-dom-element is a single file upload input
;; <input type="file">
(upload (-> some-dom-element .-files first))
If you don't want to use cljs-http, see cljs-http.core/request in its source code for how to make a direct call to XhrIo
https://github.com/r0man/cljs-http/blob/master/src/cljs_http/core.cljs
Take a look at cljs-http:
;; Form parameters in a POST request (simple)
(http/post "http://example.com" {:form-params {:key1 "value1" :key2 "value2"}})
;; Form parameters in a POST request (array of values)
(http/post "http://example.com" {:form-params {:key1 [1 2 3] :key2 "value2"}})
====== UPDATE =======
You'll need some iframe hack. Read this and this:
;; Imports
(:require [goog.events :as gev])
(:import [goog.net IframeIo]
[goog.net EventType]
(defn upload []
(let [io (IframeIo.)]
(gev/listen io
(aget goog.net.EventType "SUCCESS")
#(js/alert "SUCCESS!"))
(gev/listen io
(aget goog.net.EventType "ERROR")
#(js/alert "ERROR!"))
(gev/listen io
(aget goog.net.EventType "COMPLETE")
#(js/alert "COMPLETE!"))
(.setErrorChecker io #(not= "ok" (.getResponseText io)))
(.sendFromForm io (dom/by-id "form") "/upload")))
I thought use would do it but it seems the mapping created in the current namespace is not public. Here is an example of what I'd like to achieve:
(ns my-ns
(:use [another-ns :only (another-fct)]))
(defn my-fct
[]
(another-fct 123)) ; this works fine
Then I have another namespace like this:
(ns my-ns-2
(:require [my-ns :as my]))
(defn my-fct-2
[]
(my/another-fct 456)) ; this doesn't work
I would like to do that because another-ns is a library to access a database. I would like to isolate all the calls to this library in a single namespace (my-ns), this way all the DB dependent functions would be isolated in a single namespace and it becomes easier to switch to another DB if needed.
Some of the functions of this library are just fine for me but I'd like to augment others. Let's say the read functions are fine but I'd like to augment the write functions with some validation.
The only way I see so far is to hand-code all the mapping into my-ns even for the functions I don't augment.
One way to do this selectively (specifying each function explicitly) is to use something like Zach Tellman's Potemkin library. An example of it's use is found in the lamina.core namespace which serves as the public entry point for Lamina, importing the key public functions from all other internal namespaces.
You can also use clojure.contrib.def/defalias:
(use 'clojure.contrib.def/defalias)
(defalias foo clojure.string/blank?)
(foo "")
Does this help?
(defmacro pull [ns vlist]
`(do ~#(for [i vlist]
`(def ~i ~(symbol (str ns "/" i))))))
Here's an example:
(ns my-ns)
(defmacro pull [ns vlist]
`(do ~#(for [i vlist]
`(def ~i ~(symbol (str ns "/" i))))))
(pull clojure.string (reverse replace))
(defn my-reverse
[]
(reverse "abc"))
(ns my-ns-2)
(defn my-fct-2 []
(list (my-ns/my-reverse)
(my-ns/reverse "abc")))
(my-fct-2)
If you want to just pull in everything, then:
(defmacro pullall [ns]
`(do ~#(for [i (map first (ns-publics ns))]
`(def ~i ~(symbol (str ns "/" i))))))
(pullall clojure.string)
To pull everything from namespace that may have macros defined within use this
(defmacro pullall [ns]
`(do ~#(for [[sym var] (ns-publics ns)]
`(def ~sym ~var))))