[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.

Section 1WordPress 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.

Section 2Definiujemy 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).

Section 3Podsumowanie

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.