[solved] getStaticPaths , props are empty in components | Astro Lounge | Page 1

sacred obsidian Aug 19, 2023, 2:13 PM

#

Hello everyone!

1) props are empty [SOLVED]

First things first: I can't seem to be able to pass props using the values returned by getStaticPaths. When I do, the Astro.props object is always empty when I access it in my components.

/src/pages/[...slug].astro

export async function getStaticPaths() {
    // This is because I can't seem to use `props`
    const fakeURLs = {'fr/home': undefined, 'en/home': 'en'};
    const rewrite = slug => (Object.keys(fakeURLs).includes(slug) ? fakeURLs[slug] : slug);
    // const links = retrieve from Storyblok
    return links
        .filter(link => /*...*/)
        .map(link => {
            const fakeSlug = rewrite(link.slug); // e.g. "/fr/home" = "/index.html"
            return {
                params: {
                    slug: fakeSlug,
                },
                props: {
                    origSlug: link.slug,
                    lang: link.slug.substring(0, 2),
                    toto: 'tata'
                },
            };
        })
    ;
}

==> How do you store data in props for each path?

autumn wigeon Aug 19, 2023, 2:57 PM

#

How are you trying to access the props? Because it seems like you should have origslug lang and tata in props if I’m reading your first code block correctly.

https://docs.astro.build/en/reference/api-reference/#data-passing-with-props

Here’s a simple example of how to access them

Astro Documentation

API Reference

Build faster websites with less client-side JavaScript.

sacred obsidian Aug 19, 2023, 3:15 PM

#

Hi @autumn wigeon

#

I did read the documentation before coming here, but I might have understood something poorly

#

So, in /src/pages/[...slug].astro you see how I returned the props

#

I am accessing them in that way:
/src/components/Header.astro

console.log('>>>>>>>>>> HEADER', IS_DEV, VERSION, LANG(Astro), Astro.url?.pathname, Astro.params, Astro.props, Astro.props?.lang);

#

And it shows:

>>>>>>>>>> HEADER true draft fr / { slug: undefined } {} undefined

#

(slug undefined is normal as it's what the tutorial told to use in order to "rewrite" /fr/home to /)

autumn wigeon Aug 19, 2023, 3:40 PM

#

If you want to access the props in a component that is imported into /src/pages/[...slug].astro you’ll want to pass the props into that component explicitly, otherwise you can access Astro.props in /src/pages/[...slug].astro

So you could import Header into […slug] and then pass the props into it

Hope that was clear I’m on mobile right now so forgive me @sacred obsidian

#

I’d say try in the frontmatter of /src/pages/[...slug].astro console logging Astro.props and then running the dev server and visiting a page you expect to exist

sacred obsidian Aug 19, 2023, 8:30 PM

#

Hi again @autumn wigeon , that's nice of you to reply to me while on your phone!

#

You are right, I checked and props seem to be available in /src/pages/[...slug].astro

#

However I would have to cascade these props along to every child component then, in order to access the language

#

Isn't there a more "global" way of doing it?

#

The language variable (and others) is useful for the whole page, which means for every component that ultimately gets called

#

I tried passing it downwards, and it seems to be working 😄

#

I would have thought there were a more simple way, but as long as it works, I'm happy! Thank you kindly @autumn wigeon ! 🙏

#[solved] getStaticPaths , props are empty in components