Why Your Load Functions are Slow

[@videosforthegoodlife2253]

I just wanted to say again that you are doing an awesome job. I think I've seen your subs grow like 5x, and it's well deserved. I know you have a high bar, and I think you are on the right path - and deserving. Cheers!

[@Huntabyte]

Wow thanks for the kind words! I appreciate it! I am super thankful for the growth I’ve experience the last few months, I hope I can continue to deliver and meet expectations!

[@blokche_dev]

Oh! Interesting. Thanks for sharing. Love this short format. Much easier to digest 😅

[@lian1238]

2:37 so you forgot to return await for b and c but it still worked. is arrow function implicitly returning? what is this called?

[@jwankrho]

No. Defining a function as "async" is simply a shorthand way of indicating that the function returns a new Promise object. This means that the function will resolve automatically, even if you don’t explicitly include a return statement.

[@TruthWalker]

Thanks!

[@Huntabyte]

Thank you Daniel, I appreciate that!

[@radimnedved1401]

Is this still up to date? Can't find it in documentation

[@kevinsaltarelli]

This came ON TIME!!! Thank you very much :)

[@pascalwidmer3875]

Thanks, this really speeds up things a lot. One question: how do you throw errors like this? I get Promise { }, how and at what point do I determine if the request has failed?

[@Huntabyte]

Check my video on ‘Defer’ which might help answer this question!

[@Plunzi]

Thanks, this is awesome I am actually in need for this rn. Thank you very much!

[@LukasSkywalker_]

Thanks. Just yesterday I was using Promise.all. Did not know about this on Sveltekit, thanks.

[@Huntabyte]

You're welcome!

[@MrAbuYT]

Thanks for sharing this helpful content. I look forward to seeing more of it.

[@johnpeap]

Awesome man, I would never find this myself.

[@jeremyikwuje]

Thank you for this. Trying to improve the core web vital for a project, will try this tips out.

[@ABsazerNer]

that's will be the heart of my project now, I'll modify any function, please can you tell me if supabase self hosted a good choice, in your experience? if there's a better can you suggest

[@Huntabyte]

Unfortunately, I don't have experience self-hosting Supabase!

[@adimardev1550]

very useful information. thank you so much... really appreciate.

[@AakashGoplani]

This is a great technique and you explained it quite well. I wish we had something similar for universal load functions as well :(

[@gorbulevsv]

Thank you, useful information!!

[@nobodyshomeuk]

How do you handle the return not existing on "PageData" when using the methods? Is there a way to properly type it in TypeScript?

[@Huntabyte]

You can edit the PageData interface of the app.d.ts file!

[@nobodyshomeuk]

@@Huntabyte I see! I would have to include the part about it being a promise too right? Thanks for the reply!

[@TheOllieJT]

Thank you for sharing!

[@Huntabyte]

You're welcome!

[@AlexvanderValk]

What happens if any of the promises rejects?

[@Huntabyte]

The closest error boundary is rendered.

[@bjul]

Awesome video, thank you very much!

[@Huntabyte]

You’re very welcome!

[@kisaragi-hiu]

In the final example, I think it's possible to put the fetch calls in the object being returned to save a wrapper function or two at the cost of that object looking more messy; is this correct? Thank you for teaching us various parts of SvelteKit regardless!

[@Huntabyte]

That is correct! I typically will move the functions elsewhere eventually so it’s nice to have them ready to cut and paste!

[@cami7o]

Hi Hunter! If my request is done to Supabase for example, and I want to return to the page only a member from the "data" object that I should receive if the request is ok, how can I get the response from the Promise? using 'then'? Thanks!

[@SebastianEling]

You should await the call. The await will. resolve the promise, so that you get the "pure" type.

[@hanshurtig5943]

Would it be possible to do this also when using API endpoints? I've tried, but so far haven't gotten anywhere.

[@LapaNaungi]

Can i render my HTML before Load resolve ?

[@LapaNaungi]

This is the answer i was looking for kzbin.info/www/bejne/rYWpaqiro92GrKM

[@deephousefridays1911]

Great info, thank you!

[@Huntabyte]

My pleasure!

[@nextjust]

Can you make a video about using Sveltekit and Graphql? How can we work with Graphql endpoints? What is the correct and safe method? Do we need to use any graphql gateway/package? I am eagerly waiting for your video, thanks for every contribution to the ecosystem.

[@ihsanmohamad521]

houdini graphql are good

[@HarunZafer-f3u]

With SvelteKit 2, the top-level promises are no longer awaited

[@Huntabyte]

This is true!

[@piquelchips8992]

@@Huntabyte So how would you go about doing this if they are not resolved. Do I resolve the promises with await? cause that brings us back to square one. I have also seen people mention Promise.all(). How would that work? Thanks again for the great videos!

[@Lukehagar]

Fantastic Video!

[@Huntabyte]

Thanks, Luke!

[@jonathangamble]

Confused on how to do error handling with this...

[@insa1988]

Awesome 🎉

[@hiranga]

Super useful!

[@Huntabyte]

Glad it was helpful!

[@jaideepshekhar4621]

Wait, am I missing something, or will just making promises obviously reduce time to the longest timeout, since nothing is actually happening, it's just waiting for end time. Otoh, fetching data is not waiting for time end, but you're actually doing something in that time?

[@Huntabyte]

The timeout was just a demonstration - I could have put actual fetch requests there but network speed can change slightly per request so I found it more difficult to explain that point.

[@TechBuddy_]

Why wrap a single function call in a wrapper function can't we just remove the await and directly pass the promise as the return value??

[@Huntabyte]

You can certainly do this if the data doesn't require further transformation from the initial request! If I'm fetching from an API I will typically want to also do a `return await response.json()` after the `fetch` has resolved, which would require me to wrap them.

[@TechBuddy_]

@@Huntabyte well I'd chain a couple thens ( I am pretty sure thens return a new promise but I may be dumb so take that with a grain of salt )

[@Huntabyte]

@@TechBuddy_ I think it's all a matter of personal preference, I just prefer to wrap them! I think it makes it easier for others to visualize how they could potentially wrap some of their existing logic!

[@TechBuddy_]

@@Huntabyte so my way works too right ?

[@sachahjkl]

@@TechBuddy_ yes it does

[@SheeceGardazi]

waooo awesoem tut!

[@paundrakkkrishna3214]

❤️

[@Football-miracle]

Please make a vidio how to send a massage with redirect in sveltekit

[@benny-shen]

nice tips

[@Huntabyte]

Thank you!

[@tger3773]

ok

[@tger3773]

ㅎㅎ

[@underview8492]

How is this different from await Promise.all()?

[@Huntabyte]

It's not, it's just done for you :)

[@nooalovern]

or just: const [d1,d2,d3] = await Promise.all([res(3000), res(2000), res(1000)])

[@Huntabyte]

Of course, but SvelteKit does it automatically for you

[@mody-pq8kd]

Promise.all can solve this problem and make your code more readable

[@rohitkharche7562]

I wonder if Promise.all() will also achieve the same result

[@Huntabyte]

That's essentially what SvelteKit already does for you when you return promises in your load functions 🔥

[@rohitkharche7562]

@@Huntabyte so what if promises have interdependence on each other will that also tank performance

[@Huntabyte]

@@rohitkharche7562 Yeah because if you think about it - you would HAVE to wait for one promise to resolve before using those results in the next request! There's no getting around that case.

[@carlosmastin9852]

Promise.all or Promise.allsettelled should get you the same results, but definitely nice that Sveltekit can do this for you