WPGraphQL - GraphQL API dla WordPress

Instalacja:
- Wtyczki → WPGraphQL
- Aktywuj
- Endpoint: domena.pl/graphql

GraphiQL IDE:
- GraphQL → GraphiQL IDE
- Testowanie zapytań w przeglądarce
- Autouzupełnianie, dokumentacja

Pierwsze zapytanie:

query {
  posts(first: 5) {
    nodes {
      id
      title
      slug
      date
    }
  }
}

Odpowiedź:

{
  "data": {
    "posts": {
      "nodes": [
        {"id": "...", "title": "Post", ...}
      ]
    }
  }
}

Posts z detalami:

query GetPosts {
  posts(first: 10, where: {categoryName: "news"}) {
    nodes {
      title
      slug
      excerpt
      date
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          name
          slug
        }
      }
    }
  }
}

Pojedynczy post:

query GetPost($slug: ID!) {
  post(id: $slug, idType: SLUG) {
    title
    content
    date
    author {
      node {
        name
      }
    }
  }
}

Strony:

query {
  pages {
    nodes {
      title
      slug
      content
    }
  }
}

CPT w WPGraphQL:
Przy rejestracji CPT:

register_post_type('portfolio', [
    'show_in_graphql' => true,
    'graphql_single_name' => 'project',
    'graphql_plural_name' => 'projects',
    // ...
]);

Zapytanie CPT:

query {
  projects {
    nodes {
      title
      slug
    }
  }
}

ACF + WPGraphQL:
- Zainstaluj: WPGraphQL for ACF
- ACF pola automatycznie w schema

query {
  projects {
    nodes {
      title
      projectFields {
        client
        year
        technologies
      }
    }
  }
}

Fetch w Next.js:

async function getPosts() {
  const res = await fetch('https://twoja-strona.pl/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query {
          posts(first: 10) {
            nodes {
              title
              slug
            }
          }
        }
      `
    })
  });
  const json = await res.json();
  return json.data.posts.nodes;
}

Biblioteki:
- Apollo Client - pełny GraphQL client
- urql - lżejszy
- graphql-request - minimalistyczny

ISR z Next.js:
- Incremental Static Regeneration
- Statyczne strony odświeżane w tle
- Szybkość SSG + aktualność

Wdrożenie tego, o czym piszemy w artykule, wymaga doświadczenia i czasu. Jeśli wolisz, by zajęli się tym specjaliści, sprawdź naszą ofertę WordPress lub ofertę stron internetowych.

Możesz też napisać do nas bezpośrednio – umów bezpłatną konsultację, a my przeanalizujemy Twoją sytuację i zaproponujemy najlepsze rozwiązanie.