hannus
hannus
PostsComments
SSolidJS
Created by hannus on 6/22/2024 in #support
Proper Usage of load() for Authentication and Redirection in Solid-Start
Scenario: When a user tries to access a route that requires authentication, they should be redirected to the login route. After logging in, the user should be redirected back to the originally requested route. To achieve this, I created a function getUserWithQueryPara. This function checks if a session token is saved. If a token exists, it fetches the user information based on the token; if not, it redirects to the login component. To ensure the user is redirected back to the originally requested route after authentication, a query parameter is added to the login route. Here is the getUserWithQueryPara function: 
export const getUserWithQueryPara = cache(async (query?: string) => {
  "use server";
  const session = await getSession();
  const token = session.data.token;
  if (token === undefined) throw redirect(`/login?from=${query}`);
  const userinfo = await fetchUserPublicWeb(token);
  return userinfo;
}, "userinfo");
export const getUserWithQueryPara = cache(async (query?: string) => {
  "use server";
  const session = await getSession();
  const token = session.data.token;
  if (token === undefined) throw redirect(`/login?from=${query}`);
  const userinfo = await fetchUserPublicWeb(token);
  return userinfo;
}, "userinfo");
In the route that requires authentication, to improve performance, I attempted to use load() to pre-load getUserWithQueryPara. In the component, I use createAsync to obtain the result of getUserWithQueryPara. Considering that the getUserWithQueryPara function needs the pathname parameter to handle redirection for unauthenticated users, I added const pathname = useLocation().pathname in both the load() function and before creating createAsync in the component. This is to ensure consistency between pre-loading and in-component loading. Is my approach correct? Any suggestions or improvements would be appreciated. Thank you. Below is the code snippet for the component: 
export const route = {
  load() {
    const pathname = useLocation().pathname;
    void getUserWithQueryPara(pathname);
  },
} satisfies RouteDefinition;
export default function Create() {
  const pathname = useLocation().pathname;
  const userinfo = createAsync(() => getUserWithQueryPara(pathname), {
    deferStream: true,
  });
return (...)
export const route = {
  load() {
    const pathname = useLocation().pathname;
    void getUserWithQueryPara(pathname);
  },
} satisfies RouteDefinition;
export default function Create() {
  const pathname = useLocation().pathname;
  const userinfo = createAsync(() => getUserWithQueryPara(pathname), {
    deferStream: true,
  });
return (...)
18 replies
SSolidJS
Created by hannus on 4/7/2024 in #support
how to edit html attribute?
In the v1.0rc of solidstart, the Html tag generated in the entry-server.jsx. Is there a method to change the html attribute such as change dark theme to light theme in other components? If I created a signal to control the theme in entry-server.jsx, I have to use context to share the signal. Is it a proper way to wrap StartServer component into a Context in entry-server.jsx? I think it is a little strange. Is there another method? thanks a lot
4 replies
SSolidJS
Created by hannus on 4/5/2024 in #support
how to deal with flashes of unstyled content
the version of soild-start is v1.0 RC. It shows a unstyled content a while when I refresh the page. In the example of with-tailwindcss, it has the memont of unstyled as well. Is there a solution to solve ? On other hand, Have I made some mistake during render? thanks a lot
3 replies
SSolidJS
Created by hannus on 3/27/2024 in #support
[solved]Issue with Solid Start MDX Project: 404 Error for New Page
No description
21 replies
SSolidJS
Created by hannus on 2/17/2024 in #support
is Index of Store that is array Signal?
I created an array containing several objects based on createStore. When I iterate through this array using a For component and access each object, I don’t need to use a function call to retrieve specific data. This behavior aligns with the documentation. However, when I want to perform actions based on the array’s index (such as deleting the current object), I need to use a function call to correctly obtain the index value. Here’s the code snippet: 
    <For each={items}>
              {(item, index) => (
                <div className="container">
                  <div className="level px-6  is-mobile  has-shadow">
                    <div className="level-left">
                      <p>{item.name}-{index}</p>
                    </div>
                    <div className="level-right">
                      <button
                        className="button is-danger is-small"
                        onClick={() => handleDelete(index())}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                  <hr></hr>
                </div>
              )}
            </For>
    <For each={items}>
              {(item, index) => (
                <div className="container">
                  <div className="level px-6  is-mobile  has-shadow">
                    <div className="level-left">
                      <p>{item.name}-{index}</p>
                    </div>
                    <div className="level-right">
                      <button
                        className="button is-danger is-small"
                        onClick={() => handleDelete(index())}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                  <hr></hr>
                </div>
              )}
            </For>
is the index a signal? Why I have to access the value via function call in the event of onClick? However, access the value as a property works well in the JSX. Thanks a lot
15 replies
SSolidJS
Created by hannus on 2/16/2024 in #support
some confusion regarding authentication when accessing third-party APIs in SolidStart.
I have some confusion regarding authentication when accessing third-party APIs in SolidStart. Here’s the scenario: 1. I want to use Server-Side Rendering (SSR), so I chose SolidStart. 2. When accessing a third-party API, bearer authentication is required. 3. In SolidStart, both the client and server may make API requests. 4. For server-side requests, I store the token in a cookie attached to the HTTP request. The server then extracts the token and makes the third-party API request. This approach seems feasible and necessary (since only cookies can consistently carry the token with each request). 5. After rendering, the client-side may also need to access authenticated APIs. In this case, both cookies and localStorage can be used. However, localStorage is more convenient due to the security setting of httpOnly for cookies. 6. Handling client-side API requests requires same logic. My questions are: 1. Should I explicitly differentiate between server-side rendering (using the token from cookies) and client-side rendering (using the token from localStorage)? 2. Are there any other better solutions? Thanks a lot
11 replies
SSolidJS
Created by hannus on 1/26/2024 in #support
renderToString not work
I have two questions about SSR: 1. It cannot work according to document about renderToString. The browser always plain when the response is a string by renderToString. However, If the response is string that I need not to use renderToString, it works well. The code is following: import { renderToString } from "solid-js/web"; function Test() { return <div>Hello World</div>; } const server = Bun.serve({ port: 3999, fetch(request) { const html = renderToString(() => <Test />); return new Response(html, { }); // return new Response("Welcome to Bun!"); }, }); console.log(Listening on localhost:${server.port}); 2. Is solidStart too complicated to the only purpose for SSR? I just want to change my tiny project from CSR to SSR. thanks a lot.
6 replies
SSolidJS
Created by hannus on 12/17/2023 in #support
does Effect have a number limit?
I mean whether the numbers of createEffect have a limit or official advice? For instance, In the user authenticating scenario , I have created an effect to set the state as user logged in successful and then set the access token signal, so that resource could be created by the token as the source signal . What's more, there is another effect I have created to refresh the token signal when access token has expired . In this effect, a function will be called to refresh access token and return a valid one when the response of resource implied token expired information. Is two effects or even more in an APP proper? By the way, which is the better choice between function and async function the second effect? I think normal function is better, because that the token should be refreshed firstly. Or any other advices? thanks a lot
2 replies
SSolidJS
Created by hannus on 12/15/2023 in #support
does createResource with multiple signals trigger when onMount
if createResource has one signal which is false as dependency, the resource will be trigger as the signal changing. However, if I set two signals as dependency, the resource triggers in every mount alougth the signals are false . Is there any methods to avoid trigger fetcher when the group signals are false? thanks a lot
6 replies
SSolidJS
Created by hannus on 11/19/2023 in #support
how to trigger the fetcher in createResource if there are multiple signal values?
hello, newbie here. In the document, it could be create a Memo as a group of signals as following. What's changed could be trigger the fetcher? id() or name()? or both? thanks a lot import { createResource, createMemo } from "solid-js"; // the fetcher function changed to accept an object async function fetcherFunc(info: { id: number; name: string }) { const response = await fetch( https://jsonplaceholder.typicode.com/users/${info.id}/posts?name=${info.name} ); return await response.json(); } const [id, setId] = createSignal<number>(1); const [name, setName] = createSignal<string>(""); // the derived state made using createMemo const derivedState = createMemo(() => ({ id: id(), name: name() })); const [posts] = createResource(derivedState, fetcherFunc);
3 replies