https://github.com/rads/rf-query
A hook-free API to use react-query with re-frame
https://github.com/rads/rf-query
Last synced: 5 months ago
JSON representation
A hook-free API to use react-query with re-frame
- Host: GitHub
- URL: https://github.com/rads/rf-query
- Owner: rads
- License: mit
- Created: 2023-02-24T02:31:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T00:09:09.000Z (almost 3 years ago)
- Last Synced: 2025-04-01T16:21:38.690Z (10 months ago)
- Language: Clojure
- Homepage:
- Size: 19.5 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rf-query
**ALPHA STATUS**
A hook-free API to use `react-query` with `re-frame`.
## Installation
```clojure
io.github.rads/rf-query {:git/tag "v0.0.3" :git/sha "3ec323a"}
```
## Usage
1. Set up `react-query` and pass in the `useQuery` hook to `rq/set-config!`:
```clojure
(ns rf-query.example.queries
(:require [rf-query.core :as rq]
["@tanstack/react-query" :refer [useQuery
useMutation
QueryClient
QueryClientProvider]]))
(def query-client (QueryClient.))
(defn provider [props & children]
[:> QueryClientProvider {:client query-client}
(into [rq/provider props] children)])
(rq/set-config! {:use-query-fn useQuery
:use-mutation-fn useMutation})
```
2. Define your query as a map:
```clojure
(def counter
{:query-key ["counter"]
:query-fn (fn [] (js/Promise.resolve (rand-int 100)))})
```
3. Use the `rq/with-queries` function to wrap your component. Access data with the `[::rq/query-state query]` subscription:
```clojure
(ns rf-query.example.main
(:require [cljs.pprint :as pprint]
[re-frame.core :as rf]
[reagent.dom :as rdom]
[rf-query.core :as rq]
[rf-query.example.queries :as queries]))
(def hello
(rq/with-queries
[queries/counter]
(fn [_]
(let [query @(rf/subscribe [::rq/query-state queries/counter])
{:keys [status data error]} query]
[:div
[:div (case status
:loading "Loading"
:error (str "Error: " (.-message error))
:success (str "Count: " data))]
[:pre [:code (with-out-str (pprint/pprint query))]]]))))
(defn app []
[queries/provider
[hello]])
(def container (js/document.getElementById "app"))
(defn -main [& _]
(rdom/render [app] container))
```
## Example
See the [`rf-query.example` namespace](https://github.com/rads/rf-query/tree/main/src/rf_query/example).
```shell
clojure -M:shadow-cljs watch app
open http://localhost:8888
```
## Roadmap
- Support additional config options for `useQuery`