Questions about where to put database queries, seeing different wants in tutorials
New to Router/Start, coming from a Remix/RR7 background. There might not be a right or wrong answer, but I'm looking for the proper way, the intended way to do this. Here is a route loader from the docs.
// routes/posts.tsx
export const Route = createFileRoute('/posts')({
loader: () => fetchPosts(),
})
It has the data fetching happening in the exported route. Here is something from Convex (which I'm also new to).
function Home() {
const { data } = useSuspenseQuery(convexQuery(api.tasks.get, {}));
return (...
It has the data being fetched/queried in the component function and not in the exported loader. Coming from a Remix/RR7 mindset, doing that in the Loader and passing it to the component is the "right" way to do it (useLoaderData).
It looks like it works both ways (based on my copying and pasting and playing with data). Is the proper way to fetch the data in the loader? What does one gain/lose by doing it in the component?1 Reply
flat-fuchsia•8mo ago
IMO the best is to kick off the query in the loader using
queryClient.ensureQueryData(postsOptions) and then useSuspenseQuery(postsOptions) in the loader
this way you will e.g. benefit from link prefetching and still get all the niceties of useQuery