Public
Edited
Apr 12, 2024
3 forks
15 stars
c = import("https://esm.run/convex/react")
client = new c.ConvexReactClient(url)
counter = queryGenerator(client, "getCounter")
client.mutation("incrementCounter", { increment: 1 })
// client.mutation("resetCounter") // uncomment to reset the counter to 0
counter
counter * 2
Inputs.button("Increment", {
reduce: () => client.mutation("incrementCounter", { increment: 1 })
})
client.mutation("incrementCounter", { increment: "this is a string" })
queryGenerator = (client, query, args = {}) => {
const watch = client.watchQuery(query, args);
console.log(watch);
return Generators.observe((notify) => {
console.log(watch.onUpdate);
return watch.onUpdate(() => notify(watch.localQueryResult()));
});
}
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 unsubscribe = watch.onUpdate(() => {
unsubscribe();
r(watch.localQueryResult());
});
});
}
c2 = await import("https://esm.run/convex/browser")
httpClient = new c2.ConvexHttpClient(url)
httpClient.mutation("incrementCounter", { increment: 1 })
httpClient.query("getCounter")
{
const convexClient = new c2.ConvexHttpClient(url);
return await convexClient.query("getCounter");
}
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.
