query that runs once?
Is there a way to load data from a query once and stop it from being updated on db change.
I've got a collaborative text editor that I'm loading the initial data from convex using useQuery but I'm only using the data once when loading the component for the first time.
Every time I make changes in the text editor the update note mutation is run and useQuery is run.
Is it costing me to get the new data from useQuery everytime the user types?
Since I only need to load the data intially it seems like a waste.
So basically I'm looking for a non-realtime query read.
30 Replies
hey
https://discord.com/channels/1019350475847499849/1019350478817079338/1168611381923283044
const messages = await useConvex().query(api.messages.list)Is that run on the server or the client?
This is what I had
that's run on the client
Sorry I mean is
const messages = await useConvex().query(api.messages.list)
Meant to be on the client?
yes, you can do that in the app, "use client"; context -- client components. is that what you're asking?
server-side rendering is a different beast
So when I use in "use client" I get
yeah, if you want to do server-side rendering, https://docs.convex.dev/client/react/nextjs/server-rendering
Next.js Server Rendering | Convex Developer Hub
Next.js automatically renders both Client and Server Components on the server
Okay lets just go with client component.
Do I not need to make it async?
the old way would be to leverage
useEffect for this, but it's ugly. I think in react 18+ you can leverage <Suspense> with promises? but I'm not the react expert, so not 100% sure. will look at this for a minuteIf it's simpler then I can just load server side, I just want it loading once and not updating is all.
server side it's pretty simple. fetchQuery: https://docs.convex.dev/api/modules/nextjs#fetchquery
Module: nextjs | Convex Developer Hub
Helpers for integrating Convex into Next.js applications using server rendering.
Sorry if I'm missunderstanding
yeah, don't use that one -- that'
ah
that's if you want to preload a query and then resume the subscription
That will update still wont it
if you truly ONLY want it rendered on the server
fetchQuery is your friend
nice and simpleAwesome. thank Jamie.
One last question.
How would you reccomend I handle auth when doing a fetchQuery?
I'm usually handling it inside my query.
I got it I think
Had to add a middleware.ts for clerk. In order to use
const token = await getAuthToken();
nice
Then passing in the token can use my currentUser func
Which looks like this
