[doc] more information on depends and invalidate

[icalvin102]

depends and invalidate are not documented enough.
Related issues (most recently #6354) and a lot of questions on the Svelte discord server show that there is some confusion about their usage.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8ee88e7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[lukaszpolowczyk]

@icalvin102 I have a general question about depends and invalidate.

E.g. such code

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
  const url = `https://cms.example.com/articles.json`;
  const url2 = `https://cms.example.com/articles2.json`;
  const response = await fetch(url);
  const response2 = await fetch(url2);
 
  return {
    articles: await response.json(),
    articles2: await response2.json()
  };

And then invalidate:

invalidate((url) => url===`https://cms.example.com/articles.json`)`

Question: does it execute the entire load after invalidate?
Or does it execute the entire load, but bypassing the await fetch(url2)?

Because it is clearly stated in invalidate that only url is out of date.
From this it follows that url2 is up-to-date, so there is no need to perform await fetch(url2).
Is this how it works?
In this situation, does await fetch(url2) return the data from the cache, instead of executing itself?

It seems to me that this would make sense.
Just not sure where such a cache would be stored.

---

Oh, and it's hard for custom depends to handle cache.
So that you would have to somehow bind, for example, the api.client.get('/foo') function to the id used in depends() to be able to reach the cache that way.
Surely that wouldn't be so easy anymore?

[Rich-Harris]

thank you! couple of small comments, plus some notes about improvements to the invalidate API that i think would be worth sneaking in ahead of this

[icalvin102]

@lukaszpolowczyk invalidate causes the entire load function to rerun. I does not perform any magic inside of the load function.

Automatic caching of individual resources in load would be really difficult because some resources may depend on each other.

However giving the user a way to determine which resource should be fetched again would theoretically be possible if load would provide something like isInvalidating(url)

export async function load({ fetch, isInvalidating }) {
  const url = `https://cms.example.com/articles.json`;
  const url2 = `https://cms.example.com/articles2.json`;
  let response, response2;
  
  if(isInvalidating(url)) {
    response = await fetch(url);
    cache.set(url, response);
  } else {
    response = cache.get(url);
  }
  
  if(isInvalidating(url2)) {
    response2 = await fetch(url);
    cache.set(url2, response2);
  } else {
    response2 = cache.get(url2);
  }
 
  return {
    articles: await response.json(),
    articles2: await response2.json()
  };
}

But this feature does currently not exist. Might be worth a feature request.

[lukaszpolowczyk]

But this feature does currently not exist. Might be worth a feature request.

@icalvin102 I added - #6495

[Rich-Harris]

incorporated this branch into #6493, so I'll close this — thanks!