How to display articles associated with given category (gatsby+strapi)

Questions and Answers
1

Hi folks,

I am trying to display all articles associacted with a selected category on a page. I am using Strapi v4, Gatsby v4 and the right gatsby-source-strapi. The communication between Strapi and Gatsby works.

It creates the pages, builds the views and even shows the right category name. But when I want to display the associated articles below it (title, desc, slug), it shows nothing. It also doesn’t throw an error or anything, so I am guessing the data is accessed the wrong way? is this about my gatsby-config.js or is my query wrong?

gatsby-node.js create pages

  const categoryPost = path.resolve("./src/templates/category-post.js")
  const resultc = await graphql(
    `
      {
        allStrapiCategory {
          nodes {
            name
            slug
          }
        }
      }
    `
  )
  if (resultc.errors) {
    reporter.panicOnBuild(
      `There was an error loading your Strapi categories`,
      resultc.errors
    )
    return
  }
  const categories = resultc.data.allStrapiCategory.nodes
  if (categories.length > 0) {
    categories.forEach((category) => {
      createPage({
        path: `/category/${category.slug}`,
        component: categoryPost,
        context: {
          slug: category.slug,
        },
      })
    })
  }

/templates/category-post.js view data

const CategoryPage = ({ data }) => {

  const category = data.strapiCategory

  const seo = {
    metaTitle: category.name,
    metaDescription: category.description,
  }

  return (
    <Layout as="article">
      <Seo seo={seo} />
      <section className="defaultPost">
        <div class="grid-container">
          <div class="grid-x align-middle">
            <div class="cell defaultHeader">
              <h3>{category.name}</h3>
              <h1>&mdash; {category.articles.title}</h1>
              <p className="mt-4 text-2xl text-neutral-500">{category.description}</p>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  )
}

export const pageQuery = graphql`
  query ($slug: String) {
    strapiCategory(slug: { eq: $slug }) {
      id
      slug
      name
      articles {
       id
       title
       slug
       description
     }
   }
  }
`

export default CategoryPage

gatsby-config.js get data

{
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: [
          {
            singularName: "article",
            queryParams: {
              publicationState: process.env.GATSBY_IS_PREVIEW
                ? "preview"
                : "live",
              populate: {
                cover: "*",
                author: "*",
                category: "*",
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "author",
          },
          {
            singularName: "category",
            queryParams: {
              populate: {
                populate: "*",
                articles: {
                  title: "*",
                  description: "*",
                  slug: "*",
                },
              },
            },
          },
        ],
        singleTypes: [
          {
            singularName: "about",
            queryParams: {
              populate: {
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "global",
            queryParams: {
              populate: {
                favicon: "*",
                defaultSeo: {
                  populate: "*",
                },
              },
            },
          },
        ],
      },
    },
System Information
  • Strapi Version: 4.1.2.
  • Operating System: macos
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:
2

I figured it out, wrong query.

category-post.js

import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../components/layout"
import BlocksRenderer from "../components/blocks-renderer"
import Seo from "../components/seo"

const CategoryPage = ({ data }) => {

  const category = data.strapiCategory
  const articles = data.strapiArticle

  const seo = {
    metaTitle: category.name,
    metaDescription: category.description,
    //shareImage: article.cover,
  }

  return (
    <Layout as="article">
      <Seo seo={seo} />
      <section className="defaultPost">
        <div class="grid-container">
          <div class="grid-x align-middle">
            <div class="cell defaultHeader">
              <h3>{category.name}</h3>
              <h1>{articles.title}</h1>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  )
}

export const pageQuery = graphql`
  query ($slug: String) {
    strapiCategory(slug: { eq: $slug }) {
      id
      slug
      name
      articles {
       id
       title
       slug
       description
     }
   }
   category: strapiCategory(slug: { eq: $slug }) {
     name
   },
   strapiArticle(category: { slug: { eq: $slug } }) {
     id
     slug
     title
     description
     category {
       name
       id
       slug
     }
     cover {
       alternativeText
       localFile {
         url
         childImageSharp {
           gatsbyImageData
         }
       }
     }
   }
  }
`

export default CategoryPage