rebelchris / astropress

Astro WordPress headless CMS project

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

I can't build because show me error in getStaticPaths

alan-cleveston opened this issue · comments

Hi there,

Thanks for your great article, but i can´t do your tutorial because all the time show me this message error:

12:36 [routeCache] Internal Warning: getStaticPaths() called twice during the build. (src/pages/[slug].astro)

I saw, in astro issue, can be a recognized bug. Did you know, how to fix this?

Hey @alan-cleveston so I was able to build this site with the newer Astro version but I made a few modifications:

On the [slug].astro file, seems like we have to use:

const { slug } = Astro.params;

Since Astro.request.params; is not valid (today). Otherwise it will throw a fetch (title) error.

Also the menu query might throw a fetch error, so I found a workaround doing this:

Changes to the api.js :

/* Fetch menu by name */
export async function getMenuByName() {

    const data = await fetchAPI(`
    query GET_MENU_BY_NAME {
      menu(id: "Main Menu", idType: NAME) {
        count
        id
        databaseId
        name
        slug
        menuItems {
          nodes {
            id
            databaseId
            url
            cssClasses
            label
          }
        }
      }
    }
    `);

    return data?.menu;
}

The func can be improved so it receives the menu name as an argument.

You can change the "Main Menu" name and match it with your Menu.

image

Changes to the header component:

---
import { getMenuByName } from '../lib/api.js';

const { menuItems } = await getMenuByName();

---
<nav class="flex flex-wrap items-center justify-between p-6 bg-blue-500 shadow-lg">
    <a href="/" class="cursor-pointer p-4 ml-2 text-white">AstroPress</a>

    <ul class="flex items-center justify-end flex-grow">
      {menuItems.nodes.map( (item) => 
          <li>
              <a href={item.url} class={`cursor-pointer p-4 ml-2 text-white`}>
                  {item.label}
              </a>
          </li>
      )}
    </ul>
</nav>

That's how it worked for me and I was able to build it and follow up the guide.