Loving SvelteKit! Beginner Question

[JimNayzium]

I found myself diving in full speed and it made me realize I may be skipping some of the beautiful aspects of SvelteKit by rushing to make things work as I have in the past with other older ways of doing things.

In +layout.server.js at the root of the routes folder, I am writing a bunch of if/else statements to detect if params.exist and respond accordingly. Then a light bulb went off in my head and realized that I should (or maybe I should, that's what I am asking you folks!) be using +page.server.js files inside the route-particular folders and forego any logic being needed in the root level as each routes load function would be loading that which that route needs.

Am I on to something here and it's maybe clicking for me? Like I have a home page and a leagues route and a league (no s) route. The home is general welcome, the localhost/leagues route is a "view all leagues" and the /leagues/[league_id] route is the singular league profile page.

I was loading +layout.server.js at the root and then doing things like if(params.league_id) { // load he profile league_id stuff // }

When I realized I should just put the +page.server.js file inside the [league_id] folder and the load function could just directly load the league_id particular things without needing the logic at that point.

Would that be the standard mode of operation with SvelteKit, to always put the server loads inside the routes they are needed for only and not at the root?

(I just figured I want to store the league_id information and load other routes with it's store value of the league_id on those subsequent pages, but then realized I could just do /league/[league_id]/weekly_matchups/[match_up_id] and it all started to click!!

Before I change my +layout.server.js I just wanted to ask this to the experts. THANKS!!!

APOLOGIES for such a rudimentary straight forward question, but I am an old man who hasn't coded since Macromedia Flash with ActionScript 2.0 and getting back into things!!!

THANKS FOR such a wonderful thing this SVELTEKIT!!!! I love it all so far.

[david-plugge]

You are 100% correct :) That's what these files are used for.
When you create the route leages/[league_id] sveltekit checks if the param exists on it´s own. If so, it runs the load function inside +page.server.ts in that folder to load the data you need in your +page.svelte file next to it.

The main idea is: put the data as close to the ui/page that needs it.
Global state like authentication should go into the root layout, but even that can be optimized with advanced layouts.
Try to always use the the closest load function to your page you are rendering and move the data up towards the root layout when you have to.

[david-plugge]

If I set the value of the variable in the +layout.server.js and send it in the data object back to the +layout.js/+page.js and then set the store value on the client side, is that still a way to leak the values among multiple users?

That depends. If the store is globally defined somewhere inside a js or ts file it´s not safe. You can create the store inside a svelte file and make it available using context.
If you only need to read the date returned from your root layout you can also use $page.data.

[david-plugge]

You need to know that everything that´s not inside the script tag inside svelte files is almost always going to be "global" (context="module" scripts in svelte files are also global). To encapsulate the data you either need to use load functions or svelte context.

[JimNayzium]

await parent() has solved most of my issues. A follow up question.

src/
├─ lib/
I ├─ routes/
A │ ├─ +layout.server.js
B | ├─ +layout.js
C | ├─ +layout.svelte
D | ├─ league[league_id]/
D1 | │ ├─ +page.server.js
D2 | │ ├─ +page.js
D3 | │ ├─ +page.svelte
D4 | │ ├─ standings/
4a | │ │ ├─ +page.server.js
4b | │ │ ├─ +page.js
4c | │ │ ├─ +page.svelte

Observation and question:
Observation:
The "await parent()" inside files 4a, 4b and D1 all return the same thing, the data object returned by file A (+layout.server.js).

Question: Is there a way for file 4b to access all of its parents' data objects? For example, could it get the data object returned by the D1 +page.server.js file?

So far, I have not figured out how. And to be clear, I would like to be able to refresh page 4c, and have it load all the data from D1, A, B combined.

• The only way I have considered making this happen is to put all the load into the layout.server.js at the root and have URL logic so the root-est data object that I can currently access has what I need in it, but that seems like it's a poor approach if I maintain the fundamental of "load the data you need in the closest load function".

Am I missing something simple here? or maybe I am not exporting from the load functions properly. I am not sure.

Thanks!

[david-plugge]

Data from load functions exported from +page files is only visible to the corresponding +page.svelte file.
In your case you probably want to change D1 to a +layout.server.js. This will make the returned data available to all subsequent load functions.

[JimNayzium]

You are my hero.
Sarcasm aside, I truly appreciate your sincere effort to help me. Not sure yet, but at first glance making the +page. a +layout could possible just solve all my frustrations!