import type { MetaFunction } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { api } from "convex/_generated/api";
import { usePreloadedQuery } from "convex/react";
// Only available in NextJS package but trying to use it in Remix
import { preloadQuery } from "convex/nextjs";
// Remix data loader
export async function loader() {
// Runtime Typerror: Cannot destructure property 'ENV' of '__vite_ssr_import_1__.useLoaderData(...)' as it is undefined.
// Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set. (root.ts)
const tasks = await preloadQuery(api.tasks.get);
return json({ tasks });
}
export default function Index() {
const preloaded = useLoaderData<typeof loader>();
console.log(preloaded);
// Static TypeError: Argument of type 'JsonifyObject<Preloaded<FunctionReference<"query", "public", {}, any[], string | undefined>>>' is not assignable to parameter of type 'Preloaded<FunctionReference<"query">>'.
const tasks = usePreloadedQuery(preloaded.tasks);
return <div>{JSON.stringify(tasks)}</div>;
}
import type { MetaFunction } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { api } from "convex/_generated/api";
import { usePreloadedQuery } from "convex/react";
// Only available in NextJS package but trying to use it in Remix
import { preloadQuery } from "convex/nextjs";
// Remix data loader
export async function loader() {
// Runtime Typerror: Cannot destructure property 'ENV' of '__vite_ssr_import_1__.useLoaderData(...)' as it is undefined.
// Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set. (root.ts)
const tasks = await preloadQuery(api.tasks.get);
return json({ tasks });
}
export default function Index() {
const preloaded = useLoaderData<typeof loader>();
console.log(preloaded);
// Static TypeError: Argument of type 'JsonifyObject<Preloaded<FunctionReference<"query", "public", {}, any[], string | undefined>>>' is not assignable to parameter of type 'Preloaded<FunctionReference<"query">>'.
const tasks = usePreloadedQuery(preloaded.tasks);
return <div>{JSON.stringify(tasks)}</div>;
}
