Madaxen86 Comments - Answer Overflow

Madaxen86

•Created by manubaun on 11/15/2024 in #support

I get ERR_UNHANDLED_REJECTION

Got it. You can not export actions and query from files with top level "use server", because they need to run on the client. Move them to another file or place the "use server" directive at the top of the async functions.

8 replies

SSolidJS

•Created by wcifto on 11/15/2024 in #support

Handling 404 within existing catch-all route

Wrap the page also in a Suspense as data will be undefined until it has resolved. Otherwise you'll be showing your NotFound while fetching. Alternatively. You can check in getPageData if the response has data and throw if not. Keeps your page cleaner.

5 replies

SSolidJS

•Created by manubaun on 11/15/2024 in #support

I get ERR_UNHANDLED_REJECTION

Can't reproduce it. Maybe you can in a stackblitz? https://stackblitz.com/edit/github-52ahab?file=src%2Froutes%2Findex.tsx,src%2Fserver.ts What's your router version? Unrelated: You'll probaly need to "use server" to the function to be able to get and update the session.

8 replies

SSolidJS

•Created by wcifto on 11/15/2024 in #support

Handling 404 within existing catch-all route

Yep. If getPageData throws or returns a response with 4xx or 5xx an ErrorBoundary will handle the error and render the fallback.

5 replies

SSolidJS

•Created by manubaun on 11/15/2024 in #support

I get ERR_UNHANDLED_REJECTION

Maybe just return the redirect instead of throwing. At my phone, can verify atm

8 replies

SSolidJS

•Created by Lightsyr (Leandro Campos) on 11/12/2024 in #support

Problems to acess objects inside an array

Have a look at this guide. With produce you‘ll simplify your code. https://docs.solidjs.com/guides/complex-state-management#adding-to-an-array

6 replies

SSolidJS

•Created by snorbi on 11/12/2024 in #support

Handling <input>

Well not a controlled by React’s definition. Because in Solid all elements are real HTML elements they will fallback to their native behavior. For an input value is then just the defaultValue in Reacts sense. But you can control what's displayed on the input e.g. make all characters lowercase. That's controlled for me...

 const [email, setEmail] = createSignal("");
 const val = () => email().toLowerCase();

  return (
    <>
      <label>Email</label>
      <input 
      onInput={e => setEmail(e.target.value)} 
      value={val()} />
    </>
  );

 const [email, setEmail] = createSignal("");
 const val = () => email().toLowerCase();

  return (
    <>
      <label>Email</label>
      <input 
      onInput={e => setEmail(e.target.value)} 
      value={val()} />
    </>
  );

6 replies

SSolidJS

•Created by snorbi on 11/12/2024 in #support

Handling <input>

Yes it is the correct way for a controlled input. And you can alternatively use uncontrolled inputs. Both concepts exist.

6 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 10/21/2024 in #support

Cache with sanity

Did you publish a new frontend version in the meantime? Because then the router would try to get assets (scripts) which are not available after e new build.

16 replies

SSolidJS

•Created by Luka on 11/7/2024 in #support

Server Side Rendering

You can check if a component/ page is rendered on the server or client by placing a console log in the component. If the log appears in the terminal it’s server rendered, if it’s in the browser console it’s client rendered. There’s also the isServer helper you can import. Solid-Start will be in SSR mode by default or you can like you did set SSR to true. The app will then render on the server whenever a url is directly hit or when the browser is refreshed. Once the app is hydrated on the client/browser solid will switch to client side routing and rendering. Regarding createAsync and meta tags. Browsers don’t pick up when the title is changed, so using deferStream and you can also wrap the title in a Show (I’m not sure if Suspense does also work for meta tags ) component to make sure it will only be rendered once the async resource has resolved is correct. Because solid will start to stream chunk of the page to the client which are ready.

4 replies

SSolidJS

•Created by Mtlive on 11/6/2024 in #support

How to Implement Page Caching

If you are using solid-start then browser back will restore the scroll position by default. With the useBeforeLeave helper you can check if the to route is equal to the previous route. (You either need to implement the Memory router or track the previous route yourself). And the prevent.default() the event and trigger the history.before() to restore the scroll position. https://docs.solidjs.com/solid-router/reference/primitives/use-before-leave Regading caching. Currently the there's no caching mechanis besides the 5 seconds deduping "cache" of the query wrapper function build into @solidjs/router You might want to take a look at Tanstack query which is great for dashboards. It'll has an api for caching which gives you total control. https://tanstack.com/query/latest/docs/framework/solid/quick-start

2 replies

SSolidJS

•Created by snorbi on 11/6/2024 in #support

Is this a correct implementation? :)

Looks solid. (Pun intended) 😜

3 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 10/21/2024 in #support

Cache with sanity

In one of my projects I added this:

onMount(() => {
    function refreshWhenVisible() {
      if (!document.hidden && isAuthenticated()) {
        revalidate(getIsAuthenticated.key);
      }
    }
    document.addEventListener("visibilitychange", refreshWhenVisible);

    onCleanup(() => {
      document.removeEventListener("visibilitychange", refreshWhenVisible);
     
    });
  });

onMount(() => {
    function refreshWhenVisible() {
      if (!document.hidden && isAuthenticated()) {
        revalidate(getIsAuthenticated.key);
      }
    }
    document.addEventListener("visibilitychange", refreshWhenVisible);

    onCleanup(() => {
      document.removeEventListener("visibilitychange", refreshWhenVisible);
     
    });
  });

This will revalidate the cached function whenever a user revisits the page. So on desktop it would even fire when the user switches to another tab and comes back. Of course this increases the traffic. Have you set any caching headers? Like max-age or Cache-Control: no-cache

16 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 10/21/2024 in #support

Cache with sanity

Well your phone does not reload the page but shows a cached version of it until you switch routes or reload the page. Some browsers even cache during a reload. iOS Safari for example.

16 replies

SSolidJS

•Created by Don on 11/2/2024 in #support

server function error handling

That is related to your rpc. What is that doing? And if you are modifying data in a db you should probably use an action instead of query

7 replies

SSolidJS

•Created by Don on 11/2/2024 in #support

server function error handling

Uncaught errors are handled with the ErrorBoundary component. But inside server functions you can catch handle the error yourself.

7 replies

SSolidJS

•Created by ChrisThornham on 10/28/2024 in #support

RPC "use server" and CSRF Attacks

@Atila maybe you can consider publishing a npm package with a middleware which can be configured with env vars?

5 replies

SSolidJS

•Created by webstrand on 10/28/2024 in #support

<Show> not tracking signals

I can’t really explain this. It may be that Show does not realise that the reference to the map has changed!? You can check solid primitive’s reactive map https://primitives.solidjs.community/package/map#reactivemap

28 replies

SSolidJS

•Created by Eve on 10/22/2024 in #support

Why does this loop infinitely

Tough to make a solid statement without seeing the code. By default action revalidate the whole cache and this doesn’t create infinite loops. Keep your createAsync outside of reactive contexts (jsx,createEffect,createMemo) and you will be fine.

6 replies

SSolidJS

•Created by Josesito on 10/27/2024 in #support

can I import a `named export` while lazy loading the `default export`?

Well if your app root imports a component. And the app root is used in any route. Then lazy loading the same component on a specific route does not reduce the base bundle. But give it a try and check the bundle. Then you know for sure.

4 replies

Gaming

Programming