Je Suis Un Ami
Je Suis Un Ami
Explore posts from servers
SSolidJSSIASapphire - Imagine a framework
PostsComments
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
Hmm. Alright. Let me see what else is going on.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
So, for clarification, suppose this scenario. The user visits the home route where that loader is called (initially). The effect runs, the user isn’t authenticated. So, it redirects the user to the login route. After authenticating, the login route redirects the user back to the home route via navigate(“/“) (meaning, the home route is visited a second time). Will the loader run again on that second visit? My initial solution was to use a data loader. However, it wasn’t running in subsequent visits to the home route. So, I switched to an action.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
From the Data Loading section of the docs. Under caveats. “The load function is called once per route, which is the first time the user comes to that route. Following that, the fine-grained resources that remain alive synchronize with state/url changes to refetch data when needed. If the data needs a refresh, the refetch function returned in the createResource can be used.”. I need the loader to run every single time the route is visited, not just on the first load. useResource() is client-side only, meaning I cannot access the server session to get auth tokens to check if the user is authenticated (or do anything requiring access to the session for that matter). This is why I opted to use an Action. With action, my thinking was I can call it so it loads every time. At least, that was the idea.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
Either that, or get the data loader to run on every route visit instead of just the initial server-rendered load.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
Is there a way to run a server function in useResource()? The docs don’t mention it.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
https://docs.solidjs.com/solid-router/concepts/actions
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
These examples use data loaders. The reason I am using action() is because Data loaders only load on the server once then rely on useResource() to refresh subsequent data. Since I am using a server session, I opted to use Actions instead. In short: No access to useSession() if I were to do this on a createResource()
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
For clarification: The action is being executed on the initial page load. However, it isn’t being executed in subsequent visits to the route. Like if you directly enter “my site.com” this route would load and the action would execute. However, if you navigate(“/“) from some other component, the action doesn’t execute. What I am trying to accomplish is to get the action to execute event when the route is loaded via a navigate() call from some other part of my app.
16 replies
SSolidJS
Created by Je Suis Un Ami on 6/3/2024 in #support
How to Execute Server Action on Each Route Visit?
Here's the code: 
export default function Home() {
  const loadAuthenticatedUser = useAction(getAuthenticatedUserAction);
  //const loadAuthenticatedUser = useAction(dummyAction);
  const navigate = useNavigate();
  loadAuthenticatedUser();
  const authenticatedUser = useSubmission(getAuthenticatedUserAction);
  const [_, { setUser, clearUser }] = useUserContext();
  const [serverError, setServerError] = createSignal("");

  createEffect(() => {
    console.log("Executing checks to determine redirect.");
    if (authenticatedUser.result) {
      // If the user is authenticated, we redirect them to the dashboard page.
      // otherwise, we show them the main page.
      const result = authenticatedUser.result;
      console.log("Authenticated User Result present...");
      if (result.success) {
        console.log("Redirecting to Dashboard...");
        setUser(result.data as User);
        navigate("/dashboard");
      } else {
        if (result.data instanceof AppException) {
          setServerError(result.message);
          console.error(result.message);
        } else {
          // for now, we ust redirect them to the login page. as soon as we get more traction,
          // we will have a proper home page deidicated for marketing.
          console.log("Redirecting to login page.");
          clearUser();
          navigate("/login");
        }
      }
      authenticatedUser.clear();
    } else {
      console.log(JSON.stringify(authenticatedUser));
    }
  });

  const handleRetry = () => {
    setServerError("");
    authenticatedUser.retry();
  };

  return (
    <Show
      when={!serverError()}
      fallback={
        <ConfirmationMessage
          title="Something went wrong."
          description={serverError()}
          buttonText="Try Again"
          onClick={handleRetry}
          image="img/logo.svg"
        />
      }
    >
      <></>
    </Show>
  );
}
export default function Home() {
  const loadAuthenticatedUser = useAction(getAuthenticatedUserAction);
  //const loadAuthenticatedUser = useAction(dummyAction);
  const navigate = useNavigate();
  loadAuthenticatedUser();
  const authenticatedUser = useSubmission(getAuthenticatedUserAction);
  const [_, { setUser, clearUser }] = useUserContext();
  const [serverError, setServerError] = createSignal("");

  createEffect(() => {
    console.log("Executing checks to determine redirect.");
    if (authenticatedUser.result) {
      // If the user is authenticated, we redirect them to the dashboard page.
      // otherwise, we show them the main page.
      const result = authenticatedUser.result;
      console.log("Authenticated User Result present...");
      if (result.success) {
        console.log("Redirecting to Dashboard...");
        setUser(result.data as User);
        navigate("/dashboard");
      } else {
        if (result.data instanceof AppException) {
          setServerError(result.message);
          console.error(result.message);
        } else {
          // for now, we ust redirect them to the login page. as soon as we get more traction,
          // we will have a proper home page deidicated for marketing.
          console.log("Redirecting to login page.");
          clearUser();
          navigate("/login");
        }
      }
      authenticatedUser.clear();
    } else {
      console.log(JSON.stringify(authenticatedUser));
    }
  });

  const handleRetry = () => {
    setServerError("");
    authenticatedUser.retry();
  };

  return (
    <Show
      when={!serverError()}
      fallback={
        <ConfirmationMessage
          title="Something went wrong."
          description={serverError()}
          buttonText="Try Again"
          onClick={handleRetry}
          image="img/logo.svg"
        />
      }
    >
      <></>
    </Show>
  );
}
16 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Just in case someone else is reading this with the same issue. It seems this issue only arises in actions involving SSR. For server actions invoked via form action, this solution is not necessary. At least as far as I can tell. My authentication form action seems to work just fine
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Anyways. Thanks for the help my friend. Really appreciate it.
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
This helps a lot. Thanks. Here I thought SolidStart “just works”. Lmao.
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
It’s still not updated in the docs… at least from what I see. So, hopefully that changes soon.
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Yes. This is using SSR. I scattered some logs around the action. And it seems the error occurs during the getUserSession() call, which indicates I am experiencing the same issue as you linked. So, I guess the solution to this error would be to do the checks from within a middleware instead of an action. Let me try that out really quick.
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Okay. So it looks like the error is only being thrown whenever the session is being updated. So, my guess is the session is what is causing the error…
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Let me test it if it with an action that just returns immediately. If this works, my best guess is the error is somehow in how I set up the getUserSession() function?
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Here's the updated component. I basically just commented out the original useAction() and replaced it with the dummy. 
export default function Home() {
  //const loadAuthenticatedUser = useAction(getAuthenticatedUserAction);
  const loadAuthenticatedUser = useAction(dummyAction);
  const navigate = useNavigate();
  loadAuthenticatedUser();
  const authenticatedUser = useSubmission(getAuthenticatedUserAction);
  const [_, { setUser, clearUser }] = useUserContext();
  const [serverError, setServerError] = createSignal("");

  createEffect(() => {
    if (authenticatedUser.result) {
      // If the user is authenticated, we redirect them to the dashboard page.
      // otherwise, we show them the main page.
      const result = authenticatedUser.result;
      if (result.success) {
        setUser(result.data as User);
        navigate("/dashboard");
      } else {
        if (result.data instanceof AppException) {
          setServerError(result.message);
        } else {
          // for now, we ust redirect them to the login page. as soon as we get more traction,
          // we will have a proper home page deidicated for marketing.
          clearUser();
          navigate("/login");
        }
      }
      authenticatedUser.clear();
    }
  });

  const handleRetry = () => {
    setServerError("");
    authenticatedUser.retry();
  };

  return (
    <Show
      when={!serverError()}
      fallback={
        <ConfirmationMessage
          title="Something went wrong."
          description={serverError()}
          buttonText="Try Again"
          onClick={handleRetry}
          image="img/logo.svg"
        />
      }
    >
      <></>
    </Show>
  );
}
export default function Home() {
  //const loadAuthenticatedUser = useAction(getAuthenticatedUserAction);
  const loadAuthenticatedUser = useAction(dummyAction);
  const navigate = useNavigate();
  loadAuthenticatedUser();
  const authenticatedUser = useSubmission(getAuthenticatedUserAction);
  const [_, { setUser, clearUser }] = useUserContext();
  const [serverError, setServerError] = createSignal("");

  createEffect(() => {
    if (authenticatedUser.result) {
      // If the user is authenticated, we redirect them to the dashboard page.
      // otherwise, we show them the main page.
      const result = authenticatedUser.result;
      if (result.success) {
        setUser(result.data as User);
        navigate("/dashboard");
      } else {
        if (result.data instanceof AppException) {
          setServerError(result.message);
        } else {
          // for now, we ust redirect them to the login page. as soon as we get more traction,
          // we will have a proper home page deidicated for marketing.
          clearUser();
          navigate("/login");
        }
      }
      authenticatedUser.clear();
    }
  });

  const handleRetry = () => {
    setServerError("");
    authenticatedUser.retry();
  };

  return (
    <Show
      when={!serverError()}
      fallback={
        <ConfirmationMessage
          title="Something went wrong."
          description={serverError()}
          buttonText="Try Again"
          onClick={handleRetry}
          image="img/logo.svg"
        />
      }
    >
      <></>
    </Show>
  );
}
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
I just did. I created this basic action that just clears the session and then returns. It is still throwing the same error. 
const dummyAction = action(async () => {
  const session = await getUserSession();
  await session.clear();
  return {
    success: false,
    message: "Test",
    data: null,
  } as ActionResult<null>;
});
const dummyAction = action(async () => {
  const session = await getUserSession();
  await session.clear();
  return {
    success: false,
    message: "Test",
    data: null,
  } as ActionResult<null>;
});
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Nope. They just make a fetch() call and return the respective data (the authenticated user and the auth tokens respectively). Updating the session is happening in the call to user session.update() in the action function itself. The only un-await-ed promise I’m seeing is the call to loadAuthenticatedUser() action in the main component. However, that’s the same thing that the example in the actions section in the docs is doing…
29 replies
SSolidJS
Created by Je Suis Un Ami on 5/2/2024 in #support
Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien
Hmm. Let me check.
29 replies