S
SolidJS•19h ago
noxy

navigate - Wait for navigation to finish

Hello, I'm reevaluating SolidJS and somehow it started really click in my head. There's one thing that I'm trying to do right now, basically I'm wrapping my whole app with UserProvider and and to expose two 'hooks' useUser and useMaybeUser with the only difference between them being that useUser would enforce that user is present or navigate you to login page. Here's what I came up with for now. 
import { useNavigate } from "@solidjs/router";
import {
  createContext,
  createResource,
  type Resource,
  Suspense,
  useContext,
  type ParentComponent,
} from "solid-js";
import { getApiAuth, type User } from "~/client";
import { client } from "~/client/client.gen";

export const UserContext = createContext<Resource<User | undefined>>();

export function useMaybeUser() {
  const user = useContext(UserContext)!;
  return user();
}

export function useUser() {
  const user = useContext(UserContext)!;
  if (!user()) {
    const navigate = useNavigate();
    navigate("/api/auth/signin-google", { replace: true, resolve: true });
    throw Error("unreachable");
  }
  return user();
}

export const UserProvider: ParentComponent = (props) => {
  const [user] = createResource(() =>
    getApiAuth({ client }).then((r) => r.data?.user)
  );

  return (
    <UserContext.Provider value={user}>
      <Suspense>{props.children}</Suspense>
    </UserContext.Provider>
  );
};
import { useNavigate } from "@solidjs/router";
import {
  createContext,
  createResource,
  type Resource,
  Suspense,
  useContext,
  type ParentComponent,
} from "solid-js";
import { getApiAuth, type User } from "~/client";
import { client } from "~/client/client.gen";

export const UserContext = createContext<Resource<User | undefined>>();

export function useMaybeUser() {
  const user = useContext(UserContext)!;
  return user();
}

export function useUser() {
  const user = useContext(UserContext)!;
  if (!user()) {
    const navigate = useNavigate();
    navigate("/api/auth/signin-google", { replace: true, resolve: true });
    throw Error("unreachable");
  }
  return user();
}

export const UserProvider: ParentComponent = (props) => {
  const [user] = createResource(() =>
    getApiAuth({ client }).then((r) => r.data?.user)
  );

  return (
    <UserContext.Provider value={user}>
      <Suspense>{props.children}</Suspense>
    </UserContext.Provider>
  );
};
This code seems to be triggering 'unreachable' error. I'm wondering what would be the best way to wait for navigation to finish so 'unreachable' error is actually never reached?
1 Reply
noxy
noxyOP•19h ago
Hmm, I think that it might not be such a good idea to do this after all. It seems like Context is resetting on every edit (HMR?) and useUser redirects me to login even if I was alreayd logged in. Oh, I think if I move context to another file it will be fine 😆 Okay, I think I've found solution. useNavigate navigates within SolidJS app so I use window.location.replace now which seems to do the trick.

Did you find this page helpful?