Madaxen86 Comments - Answer Overflow

Madaxen86

•Created by Jason.json on 12/18/2024 in #support

Solid Start offline indicator in mobile / desktop app

You can add it to app.tsx or create a layout at the root of the routes directory (assuming you are using file routes) https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts

2 replies

SSolidJS

•Created by Jason.json on 12/14/2024 in #support

How to include Gzip compression to Solid Start project?

Yeah me too. Where do you deploy your app?

20 replies

SSolidJS

•Created by Jason.json on 12/14/2024 in #support

How to include Gzip compression to Solid Start project?

Depending on where you deploy the app, the server might handle compression as well. E.g. I have a solid-start-app running on a vps with an nginx server which compresses all responses automatically:

//request 
:method: GET
:scheme: https
:path: /api/pollresults
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9
Connection: keep-alive

//response
:status: 200
Content-Encoding: gzip
Content-Length: 20344
Content-Type: text/html
Date: Sat, 14 Dec 2024 16:44:53 GMT
Server: nginx
Status: 200 OK

//request 
:method: GET
:scheme: https
:path: /api/pollresults
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9
Connection: keep-alive

//response
:status: 200
Content-Encoding: gzip
Content-Length: 20344
Content-Type: text/html
Date: Sat, 14 Dec 2024 16:44:53 GMT
Server: nginx
Status: 200 OK

20 replies

SSolidJS

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

[h3] [unhandled] H3Error: Client-only API called on the server side. Run client-only code in onMount

You must not export functions wrapped with query from a file with toplevel "use server" Only the function inside query can be a "use server" function. The reason is that the queried function needs to run on the client. The wrapped function will then be a RPC call.

23 replies

SSolidJS

•Created by ChrisThornham on 12/5/2024 in #support

Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!

I found this: https://answers.netlify.com/t/cors-and-netlify-api-requests-not-working-on-deployment/48538/4 and this is probably better https://answers.netlify.com/t/handling-cors-preflight-requests/42724/5

18 replies

SSolidJS

•Created by notherpleb on 12/2/2024 in #support

When does load and preload run?

Yes.

4 replies

SSolidJS

•Created by sh03 on 12/1/2024 in #support

Confusion about `"use server"`

Whether a function is included in the client bundle depends on where you import a function. It’s a good practice to have your queries and actions separated from the e.g. pages.

6 replies

SSolidJS

•Created by sh03 on 12/1/2024 in #support

Confusion about `"use server"`

Query is actually just there to dedupe request through a client side in memory cache. Actions are there to update data in the client and update the cache through the actions response in a single fight ("single flight mutations") but they assure that functions run on the server. So they are not making the functions to RPCs. Without "use server" they‘ll run on the server only during the initial load, once hydrated in the browser they run on the client. Only if you use "use server" they always they’ll be replaced with an RPC call once the app has hydrated in the browser. I‘ve made a video showcasing this by returning the current time. https://youtu.be/Qw9am5NL6AI?si=eDgwbULcLqewNm8-

6 replies

SSolidJS

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

Passing Component in props

If you want to make it more generic you may use the Dynamic component and then make two types one where the component prop of dynamic is „input“ and one „textarea“

5 replies

SSolidJS

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

Passing Component in props

Why not drop the fieldprop and instead add make FieldLabelProps extend ComponenProps<"input"> You then can use splitProps to extract the label and and just pass the props to an input element

5 replies

SSolidJS

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

How to Implement Page Caching

I am not aware of a feature/component like that. That’s why I recommended to either using tanstack query which caches the fetched data. They pages have to rendered again client-side but there’s no request to the server for already visited pages until you trigger to refetch the data.

4 replies

SSolidJS

•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

Gaming

Programming