1 reply

Convex useQuery pattern

❔Advice

Hey folks! I am always back and forth between how I should be using Convex queries and UI component together. For example, in React I could have a component

<UserProfileCard ... />

<UserProfileCard ... />

on the user's profile page which has other components which consume the data from the User (

Doc<"users">

Doc<"users">

). Now I is it better to say write the Convex hook on the profile page and pass the

 Doc<"users">

 Doc<"users">

into the component so

<UserProfileCard user={user} />

<UserProfileCard user={user} />

and

const user = useQuery(api.currentUser);

const user = useQuery(api.currentUser);

on the page and say

<EditUserProfile defaultValues={user} />

<EditUserProfile defaultValues={user} />

is also on that page. Or, the other pattern I feel like is good for reusability is just

<UserProfileCard />

<UserProfileCard />

where the

const user = useQuery(api.currentUser);

const user = useQuery(api.currentUser);

is in the component file and I don't need to pass in the user doc, however I would still need the hook at the page-level for the

<EditUserProfile ..

<EditUserProfile ..

component so would this not duplicate the query unecessarily on that page and cause popcorn loading as different ocmponentns load the data at different times?

Convex Community•19h ago•

1 reply

Pythonic

Convex useQuery pattern

❔Advice

Hey folks! I am always back and forth between how I should be using Convex queries and UI component together. For example, in React I could have a component

<UserProfileCard ... />

<UserProfileCard ... />

on the user's profile page which has other components which consume the data from the User (

Doc<"users">

Doc<"users">

). Now I is it better to say write the Convex hook on the profile page and pass the

 Doc<"users">

 Doc<"users">

into the component so

<UserProfileCard user={user} />

<UserProfileCard user={user} />

and

const user = useQuery(api.currentUser);

const user = useQuery(api.currentUser);

on the page and say

<EditUserProfile defaultValues={user} />

<EditUserProfile defaultValues={user} />

is also on that page. Or, the other pattern I feel like is good for reusability is just

<UserProfileCard />

<UserProfileCard />

where the

const user = useQuery(api.currentUser);

const user = useQuery(api.currentUser);

is in the component file and I don't need to pass in the user doc, however I would still need the hook at the page-level for the

<EditUserProfile ..

<EditUserProfile ..

component so would this not duplicate the query unecessarily on that page and cause popcorn loading as different ocmponentns load the data at different times?

Convex useQuery pattern

Similar Threads

Convex useQuery pattern

Similar Threads

Similar Threads

Similar Threads