Possible to expose some data fetched at build time towards the client?

[tidal shard]

I have a initial fetch at build time that grabs some JSON data that's necessary for my website, layout scaffolding and some other parameters. I also want to make this data available afterwards client-side, in vue components - any way to expose it from astro?

Off the top of my head I'm thinking of dumping it in the DOM in a template then reading it with an eval, but that's just not nice 😦

[random grove]

You could try this function: https://docs.astro.build/en/guides/data-fetching/#fetch-in-astro

You should also be able to pass this as props to a Vue component then

[tidal shard]

Yep, I'm using fetch and it's working. Maybe I'm misunderstanding some things -- to explain in detail, I've got two cases:

Static, rendered component
Renders at build time, gets the data passed to it through a prop, after being fetched. Working fine. Since the component isn't an island (client-side component), it just gets rendered, all good.

Dynamic, island component
I also need to access the data that was fetched at build time, in dynamic Vue components (islands), client-side.

Since the site is statically generated, when deployed I no longer have access to the API endpoint that I fetched the data from, in the prod env. So I need to make it available somehow during the build - to save it somewhere. That's why I thought about dumping in the DOM.

I guess my question is more about state sharing between build time and client

[random grove]

The props passed to your components are always available, no matter if the components themselves are dynamic or static

The only issue would be if you call fetch inside a dynamic component rather than an Astro component/layout/page.

But if I understood you correctly, you aren’t doing that. So the data will be fetched at build time and Astro automatically serializes and stores them for you.

You just pass them to your components as props and don‘t need to worry about anything else

If this is not only a theoretical / planning question, but you encounter any issues with this on an actual page, feel free to share your code and we can have a look

[grizzled onyx]

Uuu sounds like a great idea for an integration 👀

[random grove]

The example I linked earlier does exactly what I described: https://docs.astro.build/en/guides/data-fetching/#fetch-in-astro

[grizzled onyx]

Build time data fetching, kinda like how image works

[random grove]

That‘s already a thing in Astro! 😄

[grizzled onyx]

But inline, magical like the getImage, inside of dynamic components

Make the magic more magical

[tidal shard]

I was thinking of making the data available globally somehow so I don't have to pass it down, it's a pretty long chain of nested components.

But I might have more of an architecture problem I guess. With some preprocessing I could set it up better for being passed down props.

[tidal shard]

Something like that, yeah 🙂

[grizzled onyx]

It's only when wrapping the dynamic component in an Astro component and doing the fetch on the Astro component

[grizzled onyx]

I don't think anyone has made such an integration yet.

You can make it yourself, though you'll need a bit of knowledge about some unholy JS tricks. If you're up for it, it should be fun.

Otherwise you might want to pitch that idea for integration makers

[tidal shard]

I'll keep it in mind, not sure yet of how to approach this overall 🙂

[random grove]

I think you should also be able to fetch your data inside a separate data.ts file, assign it to a const and export it from there, and then you import this into all the Astro components you need it on. You can then pass it to framework components from there as well.

[grizzled onyx]

True, top-level awaits can also give that effect

But I'm not sure if vite would emit the resulting constant or the code that generates the constant

It might try to do the same fetch on the client

[tidal shard]

I think I'm missing something - if I do that, it'll work at build time, of course. But will the fetched data persist afterwards, in the browser session?

[random grove]

I think we replace the Astro.fetch call with the serialized result behind the scenes.

Not sure though. It would be worth trying!

[tidal shard]

I'll give it a go

[grizzled onyx]

Wasn't Astro.fetch removed on V3?
It's not on docs

[random grove]

Sorry, I meant regular fetch all the time 😆

I wrote Astro.fetch out of being used to it