Convex: Loader data not being used in component
My app has 2 modes offline and online determined by isCloud variable. I want to preload data on server in case of online mode (in case user is logged in). I'm logged in and data is being fetched on server but on client initial data is empty and then it refetches. What am i doing wrong here?
import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useMutation } from "convex/react";
import { useLiveQuery } from "dexie-react-hooks";
import { toast } from "sonner";
import { Button } from "@/components/retroui/button";
import { createResume, db } from "@/db/dexie";
import { authClient } from "@/lib/auth-client";
import { api } from "../../../convex/_generated/api";
export const Route = createFileRoute("/dashboard/")({
component: Dashboard,
loader: async ({ context }) => {
const { userId, queryClient } = context;
if (userId) {
await queryClient.ensureQueryData(convexQuery(api.resumes.list, {}));
}
},
});
function Dashboard() {
const navigate = useNavigate();
const { userId } = Route.useRouteContext();
const { data: session, isPending: isSessionPending } =
authClient.useSession();
const createCloudResume = useMutation(api.resumes.create);
// Use session state to determine source, falling back to loader data for SSR
const isCloud = Boolean(session) || Boolean(userId);
const { data: cloudResumes } = useQuery({
...convexQuery(api.resumes.list, {}),
enabled: isCloud,
});
const localResumes = useLiveQuery(() => {
if (!isCloud) {
return db.resumes.toArray();
}
return [];
}, [isCloud]);
const resumes = isCloud ? cloudResumes : localResumes;
//....
}import { convexQuery } from "@convex-dev/react-query";
import { useQuery } from "@tanstack/react-query";
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useMutation } from "convex/react";
import { useLiveQuery } from "dexie-react-hooks";
import { toast } from "sonner";
import { Button } from "@/components/retroui/button";
import { createResume, db } from "@/db/dexie";
import { authClient } from "@/lib/auth-client";
import { api } from "../../../convex/_generated/api";
export const Route = createFileRoute("/dashboard/")({
component: Dashboard,
loader: async ({ context }) => {
const { userId, queryClient } = context;
if (userId) {
await queryClient.ensureQueryData(convexQuery(api.resumes.list, {}));
}
},
});
function Dashboard() {
const navigate = useNavigate();
const { userId } = Route.useRouteContext();
const { data: session, isPending: isSessionPending } =
authClient.useSession();
const createCloudResume = useMutation(api.resumes.create);
// Use session state to determine source, falling back to loader data for SSR
const isCloud = Boolean(session) || Boolean(userId);
const { data: cloudResumes } = useQuery({
...convexQuery(api.resumes.list, {}),
enabled: isCloud,
});
const localResumes = useLiveQuery(() => {
if (!isCloud) {
return db.resumes.toArray();
}
return [];
}, [isCloud]);
const resumes = isCloud ? cloudResumes : localResumes;
//....
}
