Does it work with latest SvelteKit?

[Jedliu]

Hi, does this package work with latest SvelteKit?

Thank you!

[JOU-amjs]

Yes! you can use SvelteHook that export from alova/svelte. see below

Or...Did you get any problems in SvelteKit?

[JOU-amjs]

link is here https://alova.js.org/get-started/quick-start/

[trulycool]

I am trying to use alova with SvelteKit (not Svelte). The YouTube vid promoting it, as well as the website, indicates is support SSR, which would indicate it is possible to run server side with SvelteKit.

SvelteKit 1 uses directory based routing (similar to Next.JS), and any route would typically have at least 2 pages:

• /folder-route-name/+page.js (runs server side first, then client side afterwards)
• OR
• /folder-route-name/+page.server.js (if wanting to run server only, never in client, as perhaps secret API key involved which should not be exposed to client)
• /folder-route-name/+page.svelte (UI code, html, css, client side javascript)

A typical +page.js uses an extend web standard fetch (that runs in node.js too, i.e. server side first). Either +page.js file needs to "return data" object which is then accessible in the +page.svelte file.

Example:
------- +page.js ------------
let query = query homepage { homepageSliders: sliders { nodes { id title sliderData { image { id mediaItemUrl } buttonLabel buttonLink } } } };

export const load = async ({ fetch, event, setHeaders }) => {
try {
const response = await fetch(import.meta.env.VITE_GRAPHQL_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
});
setHeaders({
'cache-control': max-age=0, s-maxage=${60 * 60}
});
const { data } = await response.json();
return data;
} catch (error) {
console.error(Error in load function for: ${error});
}
};
------- +page.js ------------

...Note the 'data' from the API call must be returned. Then in +page.svelte, you'd have a script tag at the top that would make the data object available in the rest of the page, something like:

---- +page.svelte -----

<script> export let data; </script>

My Homepage data: {JSON.stringify(data), null, 2}

---- +page.svelte -----

...basically anything in braces lets you access the data object or other javascript you've written in the script tags.

I followed your basic svelte example listed above, but can not figure out where to return the data. Each place I try it results in an error, which means the data from the API call is never available in the UI building file.

I take it you aren't familiar with SvelteKit, but perhaps I've given enough data that you might have an idea how to covert the code example referenced in your above link into a function the in the end will 'return data'?

[trulycool]

Incidentally, I did just try it in a new route, with no +page.js files, so just a +page.svelte file with your exact code (except with the API url replaced to something valid), and that doesn't work either.

Vite console error:
Error: Function called outside component initialization at get_current_component

[JOU-amjs]

@trulycool Thanks for your post, which let me realized that alova is incomplete in SSR.
and now v2.8.0 is released, this version is compatible with SSR frameworks like sveltekit, nextjs and nuxt3.x. you can use alova both in +page.server.js -> load and svelte components.

Here is the SSR docs.
Here is the release logs.

[trulycool]

Wow, you are fast!

Thanks so much, I look forward to checking this out now that it works with SvelteKit!

Most appreciated,
😌🙏