CODEWITHSUNDEEP
strapigridsome
Peterpan
Peterpan

Reputation: 1

strapi-girdsome starter issues

When following official strapi-gridsome tutorial, trying to create new pages from ID numbers

Steps to reproduce:

npm: '6.14.9',
node: '14.14.0',
strapi '3.5.0'

Expected result:

http://localhost:8080/categories/1 should show data from API but instead shows 404 page

Actual result:

When running gridsome develop...

ERROR Failed to compile with 1 errors
This dependency was not found:
..\my-gridsome-site\src\templates\Category.vue in ./src/.temp/routes.js

gridsome.server.js

module.exports = function (api) {
  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  })

  api.createPages(async ({ graphql, createPage }) => {
    const { data } = await graphql(`
      {
        allStrapiCategory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `);

    const categories = data.allStrapiCategory.edges;

    categories.forEach(category => {
      createPage({
        path: `/categories/${category.node.id}`,
        component: './src/templates/Category.vue',
        context: {
          id: category.node.id,
        },
      });
    });
  });
};

src\templates\category.vue

<template>
  <Layout>
    <div>
      <h1>{{ $page.category.name }}</h1>
      <ul>
        <li v-for="restaurant in $page.category.restaurants">{{ restaurant.name }}</li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
  query Category($id: ID!) {
      category: strapiCategory(id: $id) {
        name
        restaurants {
          id
          name
        }
      }
    }
</page-query>

Upvotes: 0

Views: 136

Answers (1)

ChrisAddams
ChrisAddams

Reputation: 320

I had this same issue. I was running yarn develop and hot-reload was working for general playing with data, layout etc. But when editing gridsome.server.js these changes aren't reflected. This is solved by re-starting the server. And now you'll have your dynamic pages.

Upvotes: 1

Related Questions