[JS] Pobieranie postów typu własnego za pomocą WordPress REST API

W swoim projekcie który realizuję w ramach akcji Daj Się Poznać 2017 wykorzystuję WordPress'a jako źródło danych do swojego systemu. Aby pobrać dane z tego systemu korzystam z REST API, dzięki któremu mam dostęp do niestandardowych typów postów - custom post types.

Zakładam, że posiadasz już przygotowane definicje typów postów. Jeśli jeszcze nie masz, to nie martw się. Możesz wykorzystać generator własnych typów postów dostępny tutaj.

WordPress REST API - jak zacząć?

W najnowszych wersjach WordPress'a, REST API jest domyślnie dołączane do systemu. Aby móc z niego korzystać za pomocą kodu JavaScript należy pobrać klienta JS ze strony repozytorium bądź też uruchomić następujące polecenie w linii komend (przy założeniu, że masz zainstalowane środowisko node.js):

npm install --save wpapi

Następnie, w miejscu gdzie chcemy skorzystać z klienta REST należy dodać następujący kawałek kodu:

1
2
3
4
5
6
7
8
9

import WPAPI from 'wpapi';
 
// tworzymy nową instancję obiektu WPAPI
// gdzie przekazujemy informacje jak dostać się do systemu
const wpapi = new WPAPI({
    endpoint: '<twoja-domena>/wp-json',
    username: '<login-wordpress>',
    password: '<haslo-wordpress>',
});

Dodatkowo, na WordPressie warto zainstalować plugin JSON Basic Authentication, który zapewni nam podstawy mechanizm logowania z poziomu kodu JS. Musisz jednak wiedzieć, że o ile ten sposób logowania się jest dobry podczas wstępnych prac nad projektem, to o tyle nie jest zalecany jako mechanizm stosowany na produkcji. Wtedy warto skorzystać z innych rozwiązań, chociaż z OAuth.

Definiujemy nowy endpoint REST

Gdy już mamy przygotowaną instancję obiektu WPAPI to możemy zająć się definiowaniem punktów dostępowych do naszych postów. W tym celu w pliku functions.php dodajemy następujący kawałek kodu:

1
2
3
4
5
6
7
8
9
10
11
12

function expose_rest_post_types() {
    global $wp_post_types;
 
    // włączamy widoczność postów w REST API
    $wp_post_types['sp_twoj_post']->show_in_rest = true;
    // określamy jak ma wyglądać nazwa punktu dostępowego w REST API
    $wp_post_types['sp_twoj_post']->rest_base = 'twoj_post';
    // określamy z którego kontrolera REST będziemy korzystać przy realizacji zapytań;
    // domyślnie powinien to być WP_REST_Posts_Controller
    $wp_post_types['sp_twoj_post']->rest_controller_class = 'WP_REST_Posts_Controller';
}
add_action('init', 'expose_rest_post_types', 30);

Kolejnym krokiem będzie wrócenie do pliku JS gdzie utworzyliśmy instancję obiektu WPAPI. Tam będziemy musieli poinformować klienta JS o dostępnych, niestandardowych endpointach. Aby tego dokonać musimy dodać następującą linijkę kodu:

1

wpapi.twojpost = wpapi.registerRoute('wp/v2', '/twoj_post/(?P<id>)');

Funkcja registerRoute przyjmuje dwa parametry:

• wp/v2 - przestrzeń nazw w jakiej ma działać dany endpoint; domyślnie jest to wp/v2,
• '/twoj_post/(?P)' - struktura URL zapytania REST-owego. Kawałek (?P) mówi, że id danego posta jest opcjonalne.

W ten sposób udało się nam przygotować kod do pobierania danych z WordPress'a. Zanim jednak do tego przejdziemy, to musisz wiedzieć, że WPAPI zwraca dane w postaci Promises. Czym są Promises wspomniałem w artykule dotyczącym Fetch API.

Teraz możemy przejść do sedna, czyli wywołania zapytania zwracającego posty typu, który zdefiniowaliśmy w pierwszej części artykułu:

1
2
3
4
5
6
7
8
9

wpapi
    // pobieramy nasze posty
    .twojpost()
    // w ilości 5 sztuk na stronę
    .perPage(5)
    // wyświetlamy informacje o postach w konsoli narzędzi webdeveloperskich
    .then(result => console.log('twoj_post', result))
    // jeśli wystapi błąd, to w konsoli wyświetlamy informację o błędzie
    .catch(error => console.log('%cWystąpił błąd', 'background:red;color:white;', error));

Nasze posty pobieramy za pomocą specjalnej metody wpapi.twojpost(), którą zdefiniowaliśmy przy dodawaniu informacji o endpoincie REST-owym. Więcej informacji o tym jak korzystać z klienta REST-owego w kodzie JS możesz znaleźć na stronie dokumentacji klienta JS. Tylko uprzedzam, że bywa niekompletna (co spowodowało moje frustracje wyrażone w raporcie z drugiego tygodnia prac).

Podsumowanie

WordPress REST API jest przydatnym narzędziem do tworzenia aplikacji webowych. Do prostych i mało skomplikowanych zadań przyda się całkiem dobrze, ale jeśli planujesz tworzyć bardziej rozbudowane rozwiązania to warto się przyjrzeć eZ Platform REST API, które zapewnia więcej możliwości.

Dodatkowo, przy korzystaniu z WordPress REST API warto zadbać o cache'owanie zapytań. Bez tego trzeba czasem dość długo czekać na odpowiedź z serwera. Można tego dokonać korzystać z Transient dostępnego w WordPress. Postaram się na ten temat przygotować wpis na blogu.