Would you use this: `useEffectQuery`
TL;DR: Would you use this as a wrapper around
convex.query?
☀️ Motivation: reducing convex.query boilerplate ☀️
I use the imperativeuseConvex hook quite a lot whenever I want to opt-out of the default reactivity behavior. However, the approach is always the same and contains a lot boilerplate code and local state management.
I have identified some of my typical use cases of the imperative convex.query:
1. Run query on component mount: ( useEffect(() => { convex.query() }, []))
2. Re-run query when some local state changes (useEffect(() => { convex.query() }, [myLocalState]))
3. Re-run query based on user actions (handleButtonClick() { convex.query })
4. Some or all of the above in the same component
⭐ Proposal: useEffectQuery 🌟
A useEffect-inspired hook that is an abstraction/wrapper of useConvex() and useEffect. I pasted two images of some usage example, showing the new approach compared to the vanilla
The query passed to the useEffectQuery hook is only reactive to the deps array (like useEffect), and is not reactive to neither args nor the underlying data.
It also contains goodies inspired by the richer useQuery https://www.npmjs.com/package/convex-helpers#richer-usequery such as status and returning errors as values.
------------------------------------------------
🙏 Would you use this? 🙏npm
convex-helpers
A collection of useful code to complement the official convex package.. Latest version: 0.1.96, last published: 19 hours ago. Start using convex-helpers in your project by running
npm i convex-helpers. There are 15 other projects in the npm registry using convex-helpers.
2 Replies