Skip Preload in Links and Goto

[tqwewe]

Is your feature request related to a problem? Please describe. Sometimes you might already have the data needed for a page loaded and may not need to have the preload run before loading the page. There seems like no way of disabling preload in case you already have the data.

An example for this: A product quick view that shows on any page, with a link that views the product as a page ("View product"). You would already have the product information in a store for the quickview popup, and therefor wouldn't need to fetch the product in a preload when clicking "View product".

---

Another idea would be to pass props to the preload function from a link too.

<a href="/product/example" preloadProps={{ product }}>View product</a>

Describe the solution you'd like Maybe an additional prop to the <a /> tag and goto method: skipPreload which skips the preload when navigating to the page.

For example:

<a href="/product/example" skipPreload>View product</a>

or

function viewProduct() {
  goto('/product/example', { skipPreload: true });
}

Then in the src/routes/product/[slug].svelte file, you could have a fallback in the component code.

<script context="module">
export async function preload() {
  // Get product...
  return { product }
}
</script>

<script>
import { products } from '../stores/products';

export let segment;
export let product;

if (!product) {
  // This will run if we skip preloading
  product = $products.find(({ slug }) => slug === segment);
  if (!product) {
    // Error
  }
}
</script>

Describe alternatives you've considered There doesn't seem to be many alternatives for this. The only possible thing would be a different URL but that's not really a solution.

How important is this feature to you? Need this for the project I'm currently working on.

Additional context N/A

[PatrickG]

Why not simply check in the preload function if you need to fetch the data?

[tqwewe]

@PatrickG What am I checking for in the preload function? The preload function is run on the server and doesn't have access to the clients local svelte stores.

I may be missing something but I don't think that's an option?

[PatrickG]

Actually, the preload function runs on the server and the client.

You could do the following

<script context="module">
  import { store } from '../stores/products';
  import { get } from 'svelte/store';

  export async function preload(...) {
    if (process.env.browser) {
      const products = get(store);
      if (products) {
        const product = products.find(...);
        if (product) {
          return { product };
        }
      }
    }

    // Fetch product from you api...
  }
</script>

Although I would create a function (like getProduct()) for that at another place and use that.

[tqwewe]

@PatrickG Thank you for your help! I wasn't aware I could do this.