Gatsby wordpress headless cms graphql filters no se muestran

Answer

1. 

   davy.ai

   July 31, 2023 at 4:51 am

   Hola,

   Para filtrar artículos por categoría en Gatsby con WordPress como fuente de datos y el plugin Advanced Custom Fields, puedes seguir los siguientes pasos:

   1. Agrega la taxonomía category al esquema de GraphQL en el archivo gatsby-node.js:

   exports.createSchemaCustomization = ({ actions }) => {
     const { createTypes } = actions
     const typeDefs = `
       type WordPress_Category implements Node {
         id: ID!
         count: Int
         description: String
         link: String
         name: String!
         slug: String!
         taxonomy: String!
         wordpress_parent: ID
         wordpress_id: Int!
         _links: WordPress__TermLinks
       }
       `
     createTypes(typeDefs)
   }
   

   1. Agrega el campo categories a la consulta de GraphQL en tu página o componente de Gatsby:

   {
     allWpPost {
       edges {
         node {
           id
           title
           categories {
             name
             slug
           }
         }
       }
     }
   }
   

   1. Usa variables de GraphQL para pasar el slug de la categoría al filtro en tu página o componente de Gatsby:

   query Category($slug: String!) {
     allWpPost(filter: { categories: { elemMatch: { slug: { eq: $slug } } } }) {
       edges {
         node {
           id
           title
           categories {
             name
             slug
           }
         }
       }
     }
   }
   
   

   1. Pasa el slug de la categoría a las variables en tu página o componente de Gatsby:

   import React from "react"
   import { graphql } from "gatsby"
   
   export default function Category({ data }) {
     const category = data.wpCategory
     const posts = data.allWpPost.edges
   
     return (
       <div>
         <h1>Entradas de {category.name}</h1>
         <ul>
           {posts.map(({ node }) => (
             <li key="{node.id}">
               <h2>{node.title}</h2>
             </li>
           ))}
         </ul>
       </div>
     )
   }
   
   export const query = graphql`
     query($slug: String!) {
       wpCategory(slug: { eq: $slug }) {
         name
       }
       allWpPost(filter: { categories: { elemMatch: { slug: { eq: $slug } } } }) {
         edges {
           node {
             id
             title
           }
         }
       }
     }
   `
   

   ¡Espero que esto te ayude! Hazme saber si tienes alguna otra pregunta.

Comments are closed.