The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
May 26, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
c = import("https://esm.run/convex-dev/react")
Insert cell
origin = "https://wooden-llama-386.convex.cloud"
Insert cell
client = new c.ConvexReactClient(origin)
Insert cell
counter = queryGenerator(client, "getCounter")
Insert cell
incrementCounter = client.mutation("incrementCounter")

Insert cell
incrementCounter(1)

Insert cell
counter

Insert cell
counter * 2
Insert cell
Inputs.button("Increment", {
reduce: () => incrementCounter(1)
})
Insert cell
Insert cell
Insert cell
queryGenerator = (client, query, ...args) => {
const watch = client.watchQuery(query, ...args);
return Generators.observe((notify) =>
watch.onUpdate(() => notify(watch.localQueryResult()))
);
}
Insert cell
nonReactiveQuery = async (client, query, ...args) => {
const watch = client.watchQuery(query, ...args);
const cur = watch.localQueryResult();
if (cur !== undefined) return cur;
return new Promise((r) => {
const cleanup = watch.onUpdate(() => {
cleanup();
r(watch.localQueryResult());
});
});
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more