Cómo usar Astro con WordPress GraphQl

¿Para qué sirve?

La integración de Astro con WordPress mediante GraphQL te permite crear sitios web estáticos ultrarrápidos utilizando WordPress como CMS headless. Esto combina la facilidad de gestión de contenido de WordPress con el rendimiento excepcional de Astro.

Configuración inicial

Primero, instala las dependencias necesarias en tu proyecto Astro:

npm install @apollo/client graphql

Configuración del cliente GraphQL

Crea un archivo para configurar la conexión con WordPress:

// src/lib/wordpress.js
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://tu-sitio-wordpress.com/graphql',
  cache: new InMemoryCache(),
});

export default client;
export { gql };

Consultar posts desde WordPress

Para obtener los posts de WordPress, crea una query GraphQL:

// src/queries/posts.js
import { gql } from '@apollo/client';

export const GET_POSTS = gql`
  query GetPosts {
    posts {
      nodes {
        id
        title
        slug
        excerpt
        date
        featuredImage {
          node {
            sourceUrl
            altText
          }
        }
        author {
          node {
            name
          }
        }
      }
    }
  }
`;

Usar los datos en una página Astro

Integra los datos en tu componente de página:

---
// src/pages/blog.astro
import client from '../lib/wordpress';
import { GET_POSTS } from '../queries/posts';

const { data } = await client.query({
  query: GET_POSTS,
});

const posts = data.posts.nodes;
---

<html>
  <head>
    <title>Blog</title>
  </head>
  <body>
    <h1>Artículos del Blog</h1>
    <div class="posts-grid">
      {posts.map((post) => (
        <article>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <a href={`/blog/${post.slug}`}>Leer más</a>
        </article>
      ))}
    </div>
  </body>
</html>

Generar páginas dinámicas

Para crear páginas individuales para cada post:

---
// src/pages/blog/[slug].astro
import client from '../../lib/wordpress';
import { gql } from '@apollo/client';

export async function getStaticPaths() {
  const { data } = await client.query({
    query: gql`
      query GetAllSlugs {
        posts {
          nodes {
            slug
          }
        }
      }
    `,
  });

  return data.posts.nodes.map((post) => ({
    params: { slug: post.slug },
  }));
}

const { slug } = Astro.params;

const { data } = await client.query({
  query: gql`
    query GetPost($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        title
        content
        date
        author {
          node {
            name
          }
        }
      }
    }
  `,
  variables: { slug },
});

const post = data.post;
---

<html>
  <head>
    <title>{post.title}</title>
  </head>
  <body>
    <article>
      <h1>{post.title}</h1>
      <p>Por {post.author.node.name} - {post.date}</p>
      <div set:html={post.content} />
    </article>
  </body>
</html>

Ventajas de esta integración

Rendimiento: Los sitios generados con Astro son estáticos y extremadamente rápidos
SEO optimizado: HTML estático mejora la indexación en buscadores
Flexibilidad: Usa WordPress solo para gestionar contenido, no para renderizar
GraphQL eficiente: Solicita exactamente los datos que necesitas, nada más
Experiencia de editor: Los creadores de contenido siguen usando la interfaz familiar de WordPress

Esta arquitectura es ideal para blogs, sitios corporativos y cualquier proyecto que necesite contenido dinámico con rendimiento estático.