nerotide Posts - Answer Overflow

nerotide

•Created by nerotide on 6/28/2024 in #support

Redirect does not happen during load if there is an awaited call before it.

I have this piece of code in Solid Start in my route:

const getProject = cache(async function ({ id }: { id: string }) {
  "use server";
  await new Promise((resolve) => setTimeout(resolve, 3000));
  throw redirect("/");
}, "project");

export const route = {
  load: (ctx: any) => getProject({ id: ctx.params?.id }),
};

const getProject = cache(async function ({ id }: { id: string }) {
  "use server";
  await new Promise((resolve) => setTimeout(resolve, 3000));
  throw redirect("/");
}, "project");

export const route = {
  load: (ctx: any) => getProject({ id: ctx.params?.id }),
};

My original intention was to redirect a user if a record is not found. Or perhaps showing a specific 404 page. However, I stumbled upon this behavior that I don't understand. Is it a bug? If I take a look at what is being returned from the server, it still returns the page and the redirect happens on the client after the resource is loaded. However, I can't figure out how to force the redirect to always happen on the server. I noticed that it is possible only if there are no await calls before the throw of the redirect. So when you adjust the code like this:

const getProject = cache(async function ({ id }: { id: string }) {
  "use server";
  throw redirect("/"); // <-- moved this above the awaited promise
  await new Promise((resolve) => setTimeout(resolve, 3000));
}, "project");

export const route = {
  load: (ctx: any) => getProject({ id: ctx.params?.id }),
};

const getProject = cache(async function ({ id }: { id: string }) {
  "use server";
  throw redirect("/"); // <-- moved this above the awaited promise
  await new Promise((resolve) => setTimeout(resolve, 3000));
}, "project");

export const route = {
  load: (ctx: any) => getProject({ id: ctx.params?.id }),
};

It redirects. But that is not what I want. I need to make an API call before that. Am I just doing the whole thing wrong? I've been struggling with this for hours. I would appreciate any help. Also, the cache part is little documented. I would like to avoid leaking private resources behind protected API endpoints. Am I supposed to pass the user's unique API key as a function parameter to the cached function so if I had 2 users call the cached function with the same parameters, like a slug for example, so they wouldn't accidentally get someone else's cached result? Also is there a way to not use the "cache" and redirect on the server? I feel like I will certainly mess something up with it 😄 Thank you in advance for your answers. 💙

5 replies

SSolidJS

•Created by nerotide on 12/26/2023 in #support

Dragging rectangles impossible? (tried to build a timeline component)

Hey, I wanted to build a timeline component where you could drag divs left and right with your mouse. It would be stored in a state and the rectangles would be rendered using For. However, it seems like something like that is impossible. At first, I tried to set the state like in react by basically taking the object that defines the dragged box, making a copy of it by spreading its contents, setting the new values, and assigning it back to the array in a map function that would replace the original object by index. That resulted in the rectangle component being unmounted immediately. So I tried preserving the references. That kind of worked but it does not re-render the list during the changes but only after the rectangle component changes its dragged state to false. Please, look at this example. Try dragging the rectangles and see what I mean. https://playground.solidjs.com/anonymous/2e4da24a-a2bd-4f87-abc4-5553d3f288af How should I approach this properly to make things re-render while dragging?

7 replies

Gaming

Programming