how do i redirect on load?

i did this

export const route = {
  load: async () => {
    "use server";
    const cookie = getCookie("chat_session");
    if (!cookie) throw redirect("/");
  },
};

export const route = {
  load: async () => {
    "use server";
    const cookie = getCookie("chat_session");
    if (!cookie) throw redirect("/");
  },
};

this is not working

exerciseOP•5/21/24, 2:09 PM

it crashes the whole server

Brendonovich•5/21/24, 2:10 PM

redirect

redirect

is for use within

cache

cache

action

action

, try extracting that async function into a

cache

cache

and calling it in

load

load

exerciseOP•5/21/24, 2:13 PM

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

exerciseOP•5/21/24, 2:16 PM

when i

return redirect

return redirect

it doesn't do anything

Brendonovich•5/21/24, 2:16 PM

da heck, can you show your code now?

BBrendonovich da heck, can you show your code now?

exerciseOP•5/21/24, 2:20 PM

actually wait

exerciseOP•5/21/24, 2:20 PM

i got a different problem

exerciseOP•5/21/24, 2:20 PM

// routes/admin.tsx

import { load } from "~/lib/api";

export const route = {
  load,
};

export default function Admin() {
  return (
    <main>
      <h1>Admin</h1>
    </main>
  );
}

// routes/admin.tsx

import { load } from "~/lib/api";

export const route = {
  load,
};

export default function Admin() {
  return (
    <main>
      <h1>Admin</h1>
    </main>
  );
}

// lib/server.ts

export const load = async () => {
  "use server";
  const cookie = getCookie("chat_session");
  if (!cookie) throw redirect("/");
};

// lib/server.ts

export const load = async () => {
  "use server";
  const cookie = getCookie("chat_session");
  if (!cookie) throw redirect("/");
};

// lib/api.ts

import { action, cache } from "@solidjs/router";
import {
  getChat as _getChat,
  createChat as _createChat,
  sendMessage as _sendMessage,
  load as _load,
} from "./server";

export const getChat = cache(_getChat, "chat");
export const createChatAction = action(_createChat, "create-chat");
export const sendMessage = action(_sendMessage, "send-message");
export const load = cache(_load, "load");

// lib/api.ts

import { action, cache } from "@solidjs/router";
import {
  getChat as _getChat,
  createChat as _createChat,
  sendMessage as _sendMessage,
  load as _load,
} from "./server";

export const getChat = cache(_getChat, "chat");
export const createChatAction = action(_createChat, "create-chat");
export const sendMessage = action(_sendMessage, "send-message");
export const load = cache(_load, "load");

exerciseOP•5/21/24, 2:20 PM

exerciseOP•5/21/24, 2:21 PM

this is what i'm getting

Brendonovich•5/21/24, 2:22 PM

yea that's odd, i'm not sure

peerreynders•5/21/24, 3:14 PM

I wonder whether the issue is that the redirect happens on the server side.

// In a server module
async function hasChatCookie() {
  'use server';
  return getCookie('chat_session') !== undefined;
}

// in a client module
const load = cache(async () => {
  const result = await hasChatCookie();
  if (!result) throw redirect('/');
  return true;
}, 'load');

// in the route module
export const route = {
  load: async () => load(),
};

// In a server module
async function hasChatCookie() {
  'use server';
  return getCookie('chat_session') !== undefined;
}

// in a client module
const load = cache(async () => {
  const result = await hasChatCookie();
  if (!result) throw redirect('/');
  return true;
}, 'load');

// in the route module
export const route = {
  load: async () => load(),
};

peerreynders•5/21/24, 3:26 PM

Given that this

async () => {
  "use server";
  const cookie = getCookie("chat_session");
  if (!cookie) throw redirect("/");
};

async () => {
  "use server";
  const cookie = getCookie("chat_session");
  if (!cookie) throw redirect("/");
};

is a request to

/server_

/server_

that thrown response would have to be serialized and sent in a wrapper response to get back to the client (I think Ryan demonstrated that that actually works).

However on client side the router would be staring at the unwrapped redirect response? I guess that could be made to work …

peerreynders•5/21/24, 4:24 PM

OK… that error happens as soon as you make the load function

async

async

by extension redirects won't work.

peerreynders•5/21/24, 7:04 PM

I think the idea is to only warm the cache in the load and then act on it later in the route component.

PhilippCh4ts•5/27/24, 7:55 AM

Facing the same issue right now. At least according to the docs, this is supposed to work as confirmed in this thread, right? https://docs.solidjs.com/solid-start/advanced/auth#protected-routes

I have a similar implementation for an

(admin).tsx

(admin).tsx

route group, see below. It logs

null

null

for the user object, but doesn’t redirect.

Am I missing something?

const getCurrentUser = cache(function () {
  "use server";
  const event = getRequestEvent()!;
  if (!event.locals.user) {
    console.log(event.locals.user);
    return redirect("/login");
  }
  return event.locals.user;
}, "current_user");

export const route = {
  load() {
    void getCurrentUser();
  },
} satisfies RouteDefinition;

const getCurrentUser = cache(function () {
  "use server";
  const event = getRequestEvent()!;
  if (!event.locals.user) {
    console.log(event.locals.user);
    return redirect("/login");
  }
  return event.locals.user;
}, "current_user");

export const route = {
  load() {
    void getCurrentUser();
  },
} satisfies RouteDefinition;

PPhilippCh4ts Facing the same issue right now. At least according to the docs, this is suppose...

peerreynders•5/27/24, 4:04 PM

In your case it may actually start to work if you

throw redirect("/login")

throw redirect("/login")

Ppeerreynders In your case it may actually start to work if you ```throw redirect("/login")```

exerciseOP•5/27/24, 4:06 PM

i do this to protect

but that doesn't work with redirecting from

/login

/login

if you're already logged in

Ppeerreynders In your case it may actually start to work if you ```throw redirect("/login")```

PhilippCh4ts•5/27/24, 4:09 PM

Ah, sorry. Didn’t notice while copying the example. I did try both

throw

throw

and

return

return

, neither works

PPhilippCh4ts Ah, sorry. Didn’t notice while copying the example. I did try both `throw` and `...

peerreynders•5/27/24, 4:13 PM

The point of interest then is what is in the response from the server. For this to work

/login

/login

needs to be in the

Location

Location

header. Two paths:

if it's not there, why isn't it
if it's there, why isn't the router navigating

Eexercise i do this to protect `/` but that doesn't work with redirecting from `/login` to...

peerreynders•5/27/24, 4:20 PM

In your OP the issue was when you are redirecting.

From what I could tell the async

load

load

tried to access the response header when it was already too late.

So is it perhaps possible that you are

redirect

redirect

ing (on the server side) outside of where the server's response can be touched or something else is modifying the

Location

Location

header later?

Ppeerreynders The point of interest then is what is in the response from the server. For this ...

PhilippCh4ts•5/28/24, 7:00 AM

Sorry new to Solid altogether. Where exactly would I check the value of that header? On

nativeEvent

nativeEvent

within the cache fn? Bit puzzled as to what’s happening here, I’ve tried to create a reproduction yesterday and it did in fact work as expected. So I thought maybe it had to do something with my local setup. Anyway, I’m just trying the Stackblitz example again now (not having changed anything) and the same issue is appearing https://stackblitz.com/edit/github-qbrg4x?file=src%2Froutes%2F(admin).tsx

Also downloaded this project locally, and can reproduce there too.

Edit: Not sure if related, but there is an error showing up in the console when refreshing the

/manage-orders

/manage-orders

page.

Uncaught (in promise) Response {type: 'default', url: '', redirected: false, status: 302, ok: false, …}

Uncaught (in promise) Response {type: 'default', url: '', redirected: false, status: 302, ok: false, …}

PPhilippCh4ts Sorry new to Solid altogether. Where exactly would I check the value of that hea...

peerreynders•5/28/24, 3:27 PM

As soon as you add a direct dependency in the route component to a cache point that just threw a

redirect

redirect

, the navigation to that route will comply with the

redirect

redirect

as well.

// file: src/routes/(admin).tsx
import {
  cache,
  createAsync,
  redirect,
  type RouteDefinition,
  type RouteSectionProps,
} from '@solidjs/router';
import { getRequestEvent } from 'solid-js/web';

const getCurrentUser = cache(async function () {
  'use server';
  const event = getRequestEvent()!;
  if (!event.locals.user) {
    throw redirect('/');
  }
  return event.locals.user;
}, 'current_user');

export const route = {
  load() {
    void getCurrentUser();
  },
} satisfies RouteDefinition;

export default function Admin(props: RouteSectionProps) {
  // Add this line and it prevents the navigation
  // (complies with the redirect?) when there is no user.
  const _user = createAsync(() => getCurrentUser());

  return props.children;
}

// file: src/routes/(admin).tsx
import {
  cache,
  createAsync,
  redirect,
  type RouteDefinition,
  type RouteSectionProps,
} from '@solidjs/router';
import { getRequestEvent } from 'solid-js/web';

const getCurrentUser = cache(async function () {
  'use server';
  const event = getRequestEvent()!;
  if (!event.locals.user) {
    throw redirect('/');
  }
  return event.locals.user;
}, 'current_user');

export const route = {
  load() {
    void getCurrentUser();
  },
} satisfies RouteDefinition;

export default function Admin(props: RouteSectionProps) {
  // Add this line and it prevents the navigation
  // (complies with the redirect?) when there is no user.
  const _user = createAsync(() => getCurrentUser());

  return props.children;
}

PPhilippCh4ts Sorry new to Solid altogether. Where exactly would I check the value of that hea...

peerreynders•5/28/24, 3:48 PM

Where exactly would I check the value of that header?

In this particular case I was talking about looking at the response to

http://localhost:3000/_server/?id=…%2Fsrc%2Froutes%2F(admin).tsx%3Fpick%3Droute&name=%24%24function0

http://localhost:3000/_server/?id=…%2Fsrc%2Froutes%2F(admin).tsx%3Fpick%3Droute&name=%24%24function0

in the network tab of the developer tools.

That request will happen as soon as you hover over the

manage-order

manage-order

link because of the

getCurrentUser()

getCurrentUser()

you put in the route component's load function.

Once you click on the request, you get access to the

Headers

Headers

tab which lists the request and response headers.

The raw version of the response headers look like:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
location: /
content-type: text/javascript
Date: Tue, 28 May 2024 15:31:21 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
location: /
content-type: text/javascript
Date: Tue, 28 May 2024 15:31:21 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

Notice the

Location: /

Location: /

—that is the result of your

redirect

redirect

Ppeerreynders As soon as you add a direct dependency in the route component to a cache point t...

PhilippCh4ts•5/28/24, 4:50 PM

As soon as you add a direct dependency in the route component to a cache point that just threw a redirect, the navigation to that route will comply with the redirect as well.

Gosh, that was it. Everything working as expected now

Thanks so much for the pointers, that’s great info!

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".] { code: 'ERR_UNHANDLED_REJECTION' }

// lib/api.ts import { action, cache } from "@solidjs/router"; import { getChat as _getChat, createChat as _createChat, sendMessage as _sendMessage, load as _load, } from "./server"; export const getChat = cache(_getChat, "chat"); export const createChatAction = action(_createChat, "create-chat"); export const sendMessage = action(_sendMessage, "send-message"); export const load = cache(_load, "load");

// In a server module async function hasChatCookie() { 'use server'; return getCookie('chat_session') !== undefined; } // in a client module const load = cache(async () => { const result = await hasChatCookie(); if (!result) throw redirect('/'); return true; }, 'load'); // in the route module export const route = { load: async () => load(), };

const getCurrentUser = cache(function () { "use server"; const event = getRequestEvent()!; if (!event.locals.user) { console.log(event.locals.user); return redirect("/login"); } return event.locals.user; }, "current_user"); export const route = { load() { void getCurrentUser(); }, } satisfies RouteDefinition;

// file: src/routes/(admin).tsx import { cache, createAsync, redirect, type RouteDefinition, type RouteSectionProps, } from '@solidjs/router'; import { getRequestEvent } from 'solid-js/web'; const getCurrentUser = cache(async function () { 'use server'; const event = getRequestEvent()!; if (!event.locals.user) { throw redirect('/'); } return event.locals.user; }, 'current_user'); export const route = { load() { void getCurrentUser(); }, } satisfies RouteDefinition; export default function Admin(props: RouteSectionProps) { // Add this line and it prevents the navigation // (complies with the redirect?) when there is no user. const _user = createAsync(() => getCurrentUser()); return props.children; }