2 replies

Would you use this: `useEffectQuery`

TL;DR: Would you use this as a wrapper around

convex.query

convex.query

const { data, error, status, runQuery } = useEffectQuery(query, args, deps?)

const { data, error, status, runQuery } = useEffectQuery(query, args, deps?)

Motivation: reducing

convex.query

convex.query

boilerplate

I use the imperative

useConvex

useConvex

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

convex.query

:

1. Run query on component mount: (

useEffect(() => { convex.query() }, [])

useEffect(() => { convex.query() }, [])

)
2. Re-run query when some local state changes (

useEffect(() => { convex.query() }, [myLocalState])

useEffect(() => { convex.query() }, [myLocalState])

)
3. Re-run query based on user actions (

handleButtonClick() { convex.query }

handleButtonClick() { convex.query }

)
4. Some or all of the above in the same component

Proposal:

useEffectQuery

useEffectQuery

useEffect

useEffect

-inspired hook that is an abstraction/wrapper of

useConvex()

useConvex()

and

useEffect

useEffect

. I pasted two images of some usage example, showing the new approach compared to the vanilla

The query passed to the

useEffectQuery

useEffectQuery

hook is only reactive to the

deps

deps

array (like

useEffect

useEffect

), and is not reactive to neither
args
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

npm i convex-helpers

. There are 15 other projects in the npm registry using convex-helpers.

Would you use this: `useEffectQuery`

TL;DR: Would you use this as a wrapper around

convex.query

convex.query

const { data, error, status, runQuery } = useEffectQuery(query, args, deps?)

const { data, error, status, runQuery } = useEffectQuery(query, args, deps?)

Motivation: reducing

convex.query

convex.query

boilerplate

I use the imperative

useConvex

useConvex

convex.query

convex.query

:

1. Run query on component mount: (

useEffect(() => { convex.query() }, [])

useEffect(() => { convex.query() }, [])

)
2. Re-run query when some local state changes (

useEffect(() => { convex.query() }, [myLocalState])

useEffect(() => { convex.query() }, [myLocalState])

)
3. Re-run query based on user actions (

handleButtonClick() { convex.query }

handleButtonClick() { convex.query }

)
4. Some or all of the above in the same component

Proposal:

useEffectQuery

useEffectQuery

useEffect

useEffect

-inspired hook that is an abstraction/wrapper of

useConvex()

useConvex()

and

useEffect

useEffect

. I pasted two images of some usage example, showing the new approach compared to the vanilla

The query passed to the

useEffectQuery

useEffectQuery

hook is only reactive to the

deps

deps

array (like

useEffect

useEffect

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

npm i convex-helpers

. There are 15 other projects in the npm registry using convex-helpers.

Would you use this: `useEffectQuery`

Would you use this: `useEffectQuery`

Similar Threads

Similar Threads

Similar Threads