WPGraphQL i Next.js: poradnik Headless WordPress

# W WordPressie zainstaluj wtyczki:
# 1. WPGraphQL (wp-graphql)
# 2. WPGraphQL for ACF (opcjonalnie, jeśli używasz ACF)

// lib/wordpress.ts
import 'server-only'
 
const WORDPRESS_API_URL = process.env.WORDPRESS_API_URL!
 
interface GraphQLResponse<T> {
  data?: T
  errors?: { message: string; path?: (string | number)[] }[]
}
 
export async function fetchGraphQL<T>(
  query: string,
  variables?: Record<string, unknown>,
  options: { tags?: string[]; revalidate?: number; authToken?: string } = {},
): Promise<T> {
  if (!WORDPRESS_API_URL) {
    throw new Error('Missing WORDPRESS_API_URL')
  }
 
  const cacheOptions = options.authToken
    ? ({ cache: 'no-store' } as const)
    : {
        next: {
          revalidate: options.revalidate ?? 3600,
          tags: options.tags,
        },
      }
 
  const res = await fetch(WORDPRESS_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      ...(options.authToken && {
        Authorization: `Bearer ${options.authToken}`,
      }),
    },
    body: JSON.stringify({ query, variables }),
    signal: AbortSignal.timeout(8_000),
    ...cacheOptions,
  })
 
  if (!res.ok) {
    throw new Error(`WordPress GraphQL HTTP ${res.status}`)
  }
 
  const json = (await res.json()) as GraphQLResponse<T>
 
  // GraphQL może zwrócić HTTP 200 razem z errors i częściowym data.
  if (json.errors?.length || json.data === undefined) {
    throw new Error(
      json.errors?.map((error) => error.message).join(', ') ||
        'WordPress GraphQL response has no data',
    )
  }
 
  return json.data
}

// lib/queries/posts.ts
import { fetchGraphQL } from '../wordpress'
import { cache } from 'react'
 
interface WPPost {
  id: string
  title: string
  slug: string
  excerpt: string
  date: string
  modified: string
  content: string
  featuredImage: {
    node: {
      sourceUrl: string
      altText: string
      mediaDetails: { width: number | null; height: number | null } | null
    }
  } | null
  categories: {
    nodes: { name: string; slug: string }[]
  }
}
 
export async function getPosts(first = 20): Promise<WPPost[]> {
  const data = await fetchGraphQL<{ posts: { nodes: WPPost[] } }>(
    `
    query GetPosts($first: Int!) {
      posts(first: $first, where: { status: PUBLISH }) {
        nodes {
          id
          title
          slug
          excerpt
          date
          modified
          featuredImage {
            node {
              sourceUrl
              altText
              mediaDetails {
                width
                height
              }
            }
          }
          categories {
            nodes {
              name
              slug
            }
          }
        }
      }
    }
  `,
    { first },
    { tags: ['wp-posts'] },
  )
 
  return data.posts.nodes
}
 
const getPostBySlugUncached = async (slug: string): Promise<WPPost | null> => {
  const data = await fetchGraphQL<{ post: WPPost | null }>(
    `
    query GetPost($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        id
        title
        slug
        excerpt
        content
        date
        modified
        featuredImage {
          node {
            sourceUrl
            altText
            mediaDetails {
              width
              height
            }
          }
        }
        categories {
          nodes {
            name
            slug
          }
        }
      }
    }
  `,
    { slug },
    { tags: ['wp-posts', `wp-post-${slug}`] },
  )
 
  return data.post
}
 
// Deduplikacja tego samego odczytu między generateMetadata i stroną.
export const getPostBySlug = cache(getPostBySlugUncached)
 
export async function getAllPostSlugs(): Promise<string[]> {
  const slugs: string[] = []
  let after: string | null = null
 
  do {
    const data: {
      posts: {
        nodes: { slug: string }[]
        pageInfo: { hasNextPage: boolean; endCursor: string | null }
      }
    } = await fetchGraphQL(
      `
      query GetAllSlugs($after: String) {
        posts(first: 100, after: $after, where: { status: PUBLISH }) {
          nodes { slug }
          pageInfo {
            hasNextPage
            endCursor
          }
        }
      }
    `,
      { after },
      { tags: ['wp-posts'] },
    )
 
    slugs.push(...data.posts.nodes.map((post) => post.slug))
    after = data.posts.pageInfo.hasNextPage
      ? data.posts.pageInfo.endCursor
      : null
  } while (after)
 
  return slugs
}

yarn add sanitize-html
yarn add --dev @types/sanitize-html

// lib/sanitize-wordpress-html.ts
import 'server-only'
import sanitizeHtml from 'sanitize-html'
 
export function sanitizeWordPressHtml(html: string) {
  return sanitizeHtml(html, {
    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
      'img',
      'figure',
      'figcaption',
    ]),
    allowedAttributes: {
      ...sanitizeHtml.defaults.allowedAttributes,
      img: ['src', 'alt', 'width', 'height', 'loading'],
    },
    allowedSchemes: ['http', 'https', 'mailto'],
  })
}
 
export function wordpressText(html: string) {
  return sanitizeHtml(html, { allowedTags: [], allowedAttributes: {} }).trim()
}

// app/blog/page.tsx
import { getPosts } from '@/lib/queries/posts'
import Image from 'next/image'
import Link from 'next/link'
import { sanitizeWordPressHtml } from '@/lib/sanitize-wordpress-html'
 
export const revalidate = 3600
 
export default async function BlogPage() {
  const posts = await getPosts()
 
  return (
    <main className="mx-auto max-w-4xl py-12">
      <h1 className="mb-8 text-3xl font-bold">Blog</h1>
      <div className="space-y-8">
        {posts.map((post) => (
          <Link
            key={post.id}
            href={`/blog/${post.slug}`}
            className="group block"
          >
            <article className="flex gap-6">
              {post.featuredImage && (
                <Image
                  src={post.featuredImage.node.sourceUrl}
                  alt={post.featuredImage.node.altText || post.title}
                  width={300}
                  height={200}
                  sizes="(max-width: 768px) 100vw, 300px"
                  className="rounded-lg object-cover"
                />
              )}
              <div>
                <h2 className="text-xl font-semibold group-hover:text-blue-600">
                  {post.title}
                </h2>
                <div
                  className="mt-2 line-clamp-2 text-gray-600"
                  dangerouslySetInnerHTML={{
                    __html: sanitizeWordPressHtml(post.excerpt),
                  }}
                />
                <time className="mt-2 block text-sm text-gray-400">
                  {new Date(post.date).toLocaleDateString('pl-PL')}
                </time>
              </div>
            </article>
          </Link>
        ))}
      </div>
    </main>
  )
}

// app/blog/[slug]/page.tsx
import { getPostBySlug } from '@/lib/queries/posts'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import {
  sanitizeWordPressHtml,
  wordpressText,
} from '@/lib/sanitize-wordpress-html'
 
export const revalidate = 3600
export const dynamicParams = true
 
export async function generateStaticParams() {
  // Wpisy powstaną jako strony ISR przy pierwszym żądaniu.
  return []
}
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await getPostBySlug(slug)
  if (!post) return {}
 
  const description = wordpressText(post.excerpt).slice(0, 160)
 
  return {
    title: post.title,
    description,
    alternates: { canonical: `/blog/${post.slug}` },
    openGraph: {
      type: 'article',
      title: post.title,
      description,
      publishedTime: post.date,
      modifiedTime: post.modified,
      images: post.featuredImage
        ? [post.featuredImage.node.sourceUrl]
        : undefined,
    },
  }
}
 
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPostBySlug(slug)
  if (!post) notFound()
 
  return (
    <article className="prose prose-lg mx-auto max-w-3xl py-12">
      <h1>{post.title}</h1>
      <time className="text-gray-400">
        {new Date(post.date).toLocaleDateString('pl-PL')}
      </time>
      <div
        dangerouslySetInnerHTML={{
          __html: sanitizeWordPressHtml(post.content),
        }}
      />
    </article>
  )
}

// app/api/draft/route.ts
import { createHmac, timingSafeEqual } from 'node:crypto'
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
import { z } from 'zod'
 
const previewQuerySchema = z.object({
  id: z.coerce.number().int().positive(),
  expires: z.coerce.number().int().positive(),
  signature: z.string().regex(/^[a-f0-9]{64}$/i),
})
 
function hasValidPreviewSignature(
  id: number,
  expires: number,
  signature: string,
) {
  const secret = process.env.DRAFT_SECRET
  const now = Math.floor(Date.now() / 1000)
  if (!secret || expires < now || expires > now + 300) return false
 
  const expected = createHmac('sha256', secret)
    .update(`${id}.${expires}`)
    .digest()
  const received = Buffer.from(signature, 'hex')
 
  return (
    received.length === expected.length && timingSafeEqual(received, expected)
  )
}
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const parsed = previewQuerySchema.safeParse({
    id: searchParams.get('id'),
    expires: searchParams.get('expires'),
    signature: searchParams.get('signature'),
  })
 
  if (
    !parsed.success ||
    !hasValidPreviewSignature(
      parsed.data.id,
      parsed.data.expires,
      parsed.data.signature,
    )
  ) {
    return new Response('Invalid preview request', { status: 401 })
  }
 
  // Funkcja wysyła poświadczenia w nagłówku i zawsze używa cache: 'no-store'.
  const post = await getAuthenticatedPreviewPost(parsed.data.id)
  if (!post?.slug) return new Response('Draft not found', { status: 404 })
 
  const draft = await draftMode()
  draft.enable()
  redirect(`/blog/${encodeURIComponent(post.slug)}`)
}

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'
import { createHmac, timingSafeEqual } from 'node:crypto'
import { z } from 'zod'
 
const webhookSchema = z.object({
  event_id: z.string().min(1).max(100),
  post_type: z.literal('post'),
  slug: z.string().min(1).max(200).optional(),
  previous_slug: z.string().min(1).max(200).optional(),
  category_slugs: z.array(z.string().min(1).max(200)).max(50).default([]),
})
 
function validSignature(rawBody: string, timestamp: string, signature: string) {
  const secret = process.env.REVALIDATION_SECRET
  if (
    !secret ||
    !/^\d+$/.test(timestamp) ||
    !/^sha256=[a-f0-9]{64}$/i.test(signature)
  ) {
    return false
  }
 
  const age = Math.abs(Date.now() / 1000 - Number(timestamp))
  if (!Number.isFinite(age) || age > 300) return false
 
  const expected = createHmac('sha256', secret)
    .update(`${timestamp}.${rawBody}`)
    .digest()
  const received = Buffer.from(signature.slice(7), 'hex')
 
  if (received.length !== expected.length) return false
  return timingSafeEqual(received, expected)
}
 
export async function POST(req: Request) {
  const rawBody = await req.text()
  if (Buffer.byteLength(rawBody, 'utf8') > 64_000) {
    return Response.json({ error: 'Payload too large' }, { status: 413 })
  }
 
  const timestamp = req.headers.get('x-wp-timestamp') ?? ''
  const signature = req.headers.get('x-wp-signature') ?? ''
 
  if (!validSignature(rawBody, timestamp, signature)) {
    return Response.json({ error: 'Invalid signature' }, { status: 401 })
  }
 
  let input: unknown
  try {
    input = JSON.parse(rawBody)
  } catch {
    return Response.json({ error: 'Invalid JSON' }, { status: 400 })
  }
 
  const parsed = webhookSchema.safeParse(input)
  if (!parsed.success) {
    return Response.json({ error: 'Invalid payload' }, { status: 422 })
  }
 
  const { event_id, slug, previous_slug, category_slugs } = parsed.data
  if (!(await claimWebhookEvent(event_id))) {
    return Response.json({ revalidated: false, duplicate: true })
  }
 
  try {
    revalidateTag('wp-posts', 'max')
    revalidatePath('/blog')
 
    const affectedSlugs = [slug, previous_slug].filter(
      (value): value is string => Boolean(value),
    )
    for (const affectedSlug of new Set(affectedSlugs)) {
      revalidateTag(`wp-post-${affectedSlug}`, 'max')
      revalidatePath(`/blog/${affectedSlug}`)
    }
 
    for (const category of category_slugs) {
      revalidateTag(`wp-category-${category}`, 'max')
      revalidatePath(`/blog/kategoria/${category}`)
    }
 
    await markWebhookCompleted(event_id)
    return Response.json({ revalidated: true })
  } catch {
    await markWebhookFailed(event_id)
    return Response.json({ error: 'Revalidation failed' }, { status: 500 })
  }
}

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cms.example.com',
        port: '',
        pathname: '/wp-content/uploads/**',
        search: '',
      },
      // Jeśli używasz CDN, dodaj jego konkretny hostname i pathname osobno.
    ],
  },
}