jamalsoueidan•4w ago

How to preload data with Remix?

I understand in nextjs you can preload data with preloadQuery, but in remix it terminate the server, I also need to send the logged in user to convex, im using convex auth. Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set. I tried to add this env variable, but didnt work, in the past it did. I also think adding the data to useQuery would be great...

  const {preloadedData} = useLoaderData<typeof loader>();
  const data= useQuery(api.resumes.get, {
    id: params.id as Id<"resumes">,
  }, {preloadedData} ); // << this would be great, this way data is not undefined

  const {preloadedData} = useLoaderData<typeof loader>();
  const data= useQuery(api.resumes.get, {
    id: params.id as Id<"resumes">,
  }, {preloadedData} ); // << this would be great, this way data is not undefined

But how to fix this problem in remix? so i can remove the code below 😦

  if (!data) {
    return <>Loading data</>;
  }

  if (!data) {
    return <>Loading data</>;
  }

Many thanks

9 Replies

Convex Bot•4w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

jamalsoueidanOP•4w ago

export async function loader() {
  const url = process.env["CONVEX_URL"]!;
  const preloadedData = await preloadQuery(api.resumes.test, undefined, {
    url,
  });

  return preloadedQueryResult(preloadedData);
}

export async function loader() {
  const url = process.env["CONVEX_URL"]!;
  const preloadedData = await preloadQuery(api.resumes.test, undefined, {
    url,
  });

  return preloadedQueryResult(preloadedData);
}

this works, but still missing the authentication stuff...

FleetAdmiralJakob 🗕 🗗 🗙•4w ago

Cant u use just fetch query?

jamalsoueidanOP•4w ago

@FleetAdmiralJakob 🗕 🗗 🗙 no i need to feed it the token 😦

ballingt•4w ago

@jamalsoueidan you need to set the convex URL, see https://docs.convex.dev/api/modules/nextjs#nextjsoptions

Module: nextjs | Convex Developer Hub

Helpers for integrating Convex into Next.js applications using server rendering.

ballingt•4w ago

prealoadQuery takes options for this, they default to using the environment variable with the standard name in Next.js, but you can use any value.

jamalsoueidanOP•4w ago

@ballingt thank you, but how do I get the token, which method to use, im using convex auth? I tried to get manually from __session, it doesnt work, in the localstorage i can see the token, but this is not actually send with the request, im not sure how to handle this! Can you provide any example.

ballingt•4w ago

Do you see a __convexAuthJWT header?

jamalsoueidanOP•4w ago

I see __convexAuthJWT in the localstorage, but not in the cookie or header,,, Can we convert the nextjs functionality to remix,,,i think more and more people is using remixjs,,,