#getStaticPaths returns undefined when props is an object

22 messages · Page 1 of 1 (latest)

empty flax
#

I am trying to implement previous and next article

my getStaticPaths currently looks like this

export async function getStaticPaths() {
  const articles = await fetchArticles();

  const paths = articles.map((article) => ({
    params: {
      slug: article.slug,
    },
    props: article,
  }));

  return paths;
}

If I change to

props: {articles}

I get Cannot read properties of undefined (reading 'map')

What am I missing or doing wrong here?

grizzled frostBOT
#
Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

arctic bolt
#

what is da data of the articles array? most of the time this error means that you try to map an non array.

#

and if you want to get links to the prev and next article then something like:

export async function getStaticPaths() {
  const articles = await fetchArticles();

  const paths = articles.map((article, index) => ({
    params: {
      slug: article.slug,
    },
    props: {
      next: index <= articles.length ? articles[index + 1] : articles[0],
      prev: index > 0 ? articles[index - 1] : articles[articles.length - 1],

      acticle: article,
    },
  }));

  return paths;
}
#

the adricles array should look something like:

[
  {slug:"/path-to-article", title: "title 1", ...},
  {slug:"/path-to-article-2", title: "title 2", ...},
  ...
]
#

in your astro file you can retrieve the data like const {prev, next, article} = Astro.props

empty flax
#

It's the curly braces in props that are giving me the error

#

Let me try this....

arctic bolt
#

can you console log the articles? and post it here?

#

or share your fetchArticles() function

empty flax
#

The function is this one

export async function fetchArticles() {
  const res = await fetch(DEV_TO_API_URL + "articles/me/published", {
    headers: {
      "api-key": DEV_API_KEY,
    },
  });
  const data = await res.json();
  const articles = data;

  return articles;
}
#

Articles gives this:

ARTICLES:  [
  {
    type_of: 'article',
    id: 1360171,
    title: 'How to Display Dev.to Posts on an Astro Site',
    description: 'While I was talking time off it gave me the opportunity to go back and have a look at things that...',
    published: true,
    published_at: '2023-02-10T11:55:49.791Z',
    slug: 'how-to-display-devto-posts-on-an-astro-site-3icm',
    path: '/psypher1/how-to-display-devto-posts-on-an-astro-site-3icm',
    url: 'https://dev.to/psypher1/how-to-display-devto-posts-on-an-astro-site-3icm',
    comments_count: 2,
    public_reactions_count: 5,
    page_views_count: 150,
    },
]

30 more that look like that

arctic bolt
#

that looks good, strange you get a map error.

empty flax
#

I find it strange too

cause the moment I have props as an object, that happens

Could it be the Astro version?

arctic bolt
#

I never encountered this problem before.

props should just work.

const pageParams = links.map((post) => ({
        params: {
          slug: post.slug,
        },
        props: {
          post: post,
          otherProp: "other"
        },
      }));
empty flax
#

It's so strange

This works props: article

But this errors: props:{article}

#

I'm updating my version to see

arctic bolt
#

try
props:{article: article}

empty flax
#

Updated Astro.... Same thing....

My editor has a warming about astro/tsconfigs/base not found

#

And now my tailwind is dead

#

I'm undoing this update