Eksperimen Proyek WordExpress dengan Membawa GraphQL ke WordPress

Pada tahun 2012, ketika Facebook mulai merancang ulang aplikasi seluler berbasis HTML5 menjadi aplikasi iOS atau Android asli, perusahaan tersebut menemukan GraphQL. Bahasa kueri open source baru ini digembar-gemborkan sebagai pengganti langsung untuk REST. GraphQL menyediakan cara yang lebih efisien untuk mendukung volume interaksi yang terjadi di seluruh aplikasi Facebook setiap hari, tetapi ini adalah basis data agnostik dan dibuat untuk digunakan di luar Facebook.

Meskipun GraphQL masih relatif baru, perusahaan besar seperti Intuit, Coursera, Pinterest, dan Shopify menggunakannya dalam produksi. Bulan lalu GitHub mengumumkan dukungan GraphQL untuk GitHub API-nya untuk menjawab beberapa kelemahan arsitektur REST-nya.

GraphQL menawarkan cara baru untuk menyusun komunikasi dari klien ke server yang membuat pengambilan data menjadi lebih efisien. Dalam artikelnya GraphQL di era REST API, Petr Bela merangkum perbedaan antara dua jenis arsitektur:

Kekuatan GraphQL berasal dari ide sederhana — alih-alih mendefinisikan struktur respons di server, fleksibilitas diberikan kepada klien. Setiap permintaan menentukan bidang dan hubungan apa yang ingin diperoleh kembali, dan GraphQL akan membuat respons yang disesuaikan untuk permintaan khusus ini. Manfaatnya: hanya satu perjalanan pulang pergi yang diperlukan untuk mengambil semua data kompleks yang mungkin menjangkau beberapa titik akhir REST, dan pada saat yang sama hanya mengembalikan data yang benar-benar dibutuhkan dan tidak lebih.

Bulan lalu Facebook mengumumkan bahwa GraphQL keluar dari tahap "pratinjau teknis" dan sekarang siap produksi. Ini telah diimplementasikan dalam banyak bahasa pemrograman yang berbeda dan telah diadopsi oleh perusahaan yang menginginkan cara yang lebih efisien untuk mengakses data.

WordExpress Membawa GraphQL ke WordPress

Ramsay Lanier, pengembang front-end JavaScript yang bekerja di nclud di Washington, DC, telah membuat implementasi WordPress bertenaga GraphQL yang disebut WordExpress. Lanier bukan penggemar PHP dan tidak suka bekerja dengan loop atau template, semua hal yang secara historis merupakan bagian terbesar dari pengembangan front-end WordPress. Dia menciptakan WordExpress sebagai aplikasi Node.js dengan tujuan mengganti PHP dengan JavaScript untuk sisi presentasi WordPress. Ini menggunakan Express di backend dan komponen React di frontend. GraphQL berada di antara keduanya untuk mengambil data dari database WordPress.

“Ketika saya awalnya memulai dengan ide untuk WordExpress, saya ingin menggunakan REST API, tetapi saya menemukan bahwa titik akhir yang ada tidak seperti yang saya inginkan,” kata Lanier. “Saya akhirnya harus menulis banyak titik akhir khusus dan panggilan berantai bersama-sama. Jadi saya pikir saya akan mencoba GraphQL.”

Dia menemukan bahwa GraphQL lebih efisien daripada REST, karena mengurangi perjalanan pulang pergi ke server, memungkinkan pengembang untuk fokus pada data apa yang benar-benar dibutuhkan klien. Lanier menyoroti manfaatnya karena berkaitan dengan situs WordPress:

Dengan GraphQL, klien menentukan data persis yang dibutuhkan melalui kueri GraphQL. Kueri GraphQL memiliki fungsi penyelesaian kustom yang menentukan bagaimana data tersebut diambil. Dalam fungsi itu, Anda bahkan dapat menekan banyak basis data. Misalnya, dengan WordPress Anda memiliki database MySQL, tetapi Anda mungkin juga memiliki database Mongo untuk aplikasi yang menyimpan data lain yang tidak perlu relasional. Dalam fungsi penyelesaian GraphQL, Anda dapat membuat panggilan untuk mengambil data dari kedua database dan mengirimkannya kembali ke klien dalam satu perjalanan pulang pergi server.

WordExpress, dalam bentuknya saat ini, adalah tempat awal yang baik untuk membangun aplikasi berbasis JavaScript yang menggunakan WordPress untuk administrasi. Lanier mengatakan pengaturan pengembangan ini memungkinkan dia untuk membuat komponen halaman web dan aplikasi jauh lebih mudah daripada dengan template PHP.

“Dengan React, setiap komponen tidak hanya berisi markup untuk menampilkan hal-hal, tetapi gaya untuk komponen itu, data yang diperlukan untuk bekerja, dan logika interaksi apa pun juga – semuanya dalam satu atau dua file,” katanya.

Tantangan WordExpress Saat Ini: Kompatibilitas Plugin dan Rendering Sisi Server

Terlepas dari semua manfaat menarik dari kueri yang lebih efisien dan kemungkinan frontend yang didukung JavaScript, proyek WordExpress memiliki sejumlah tantangan serius yang akan menyulitkan penggunaan dalam produksi di luar instalasi blog sederhana. Ini tidak kompatibel dengan sebagian besar plugin WordPress, karena sebagian besar ditulis dalam PHP.

“Pada dasarnya, saya telah mengganti seluruh ujung depan, yang berarti plugin apa pun yang memengaruhi ujung depan tidak akan melakukan apa-apa,” kata Lanier. “Namun, Anda tentu dapat memanfaatkan plugin yang ada yang memengaruhi sisi admin (seperti Bidang Kustom Lanjutan atau plugin AWS S3). Apa pun yang memanipulasi bagaimana data WordPress disimpan di MySQL masih dapat digunakan – Anda hanya perlu memodifikasi skema dan kueri GraphQL Anda untuk bekerja dengannya.”

Tantangan utama lainnya adalah membuat rendering sisi server berfungsi, yang diperlukan untuk menangani hal-hal seperti SEO dan tag meta. Apollostack, yang digunakan WordExpress untuk mengambil data dan mengirimkannya ke komponen React, baru-baru ini menambahkan dukungan awal untuk rendering sisi server otomatis.

“Saya telah beralih dari menggunakan Relay Facebook ke ApolloStack,” kata Lanier. “Keduanya adalah teknologi yang cukup baru dan saya tidak yakin apakah keduanya benar-benar menemukan cara menangani rendering Sisi Server dengan sangat baik. Saya belum memeriksanya dalam beberapa bulan, dan banyak hal telah bergerak cukup cepat dengan ApolloStack, jadi mereka mungkin sudah mengetahuinya sekarang. ”

Untuk saat ini, WordExpress hanyalah bukti konsep dan Lanier mengatakan dia tidak memiliki rencana untuk mencoba mendukung plugin yang ada. Mengingat WordExpress saat ini tidak dapat memanfaatkan tema dan plugin, beberapa bagian terbaik dari ekosistem WordPress, Lanier mengatakan pengembang yang menggunakan tumpukan ini mungkin lebih tertarik untuk melestarikan kekuatan sisi admin WordPress.

“Saya suka admin WordPress,” katanya. “Ini sangat kuat dan mudah digunakan untuk mengelola konten. WordExpress akan menjadi titik awal bagi setiap pengembang JavaScript yang ingin membangun aplikasi WordPress hanya dengan menggunakan JavaScript.”

Tujuan Lanier dengan WordExpress adalah untuk mengubahnya menjadi paket npm yang dapat digunakan kembali dalam berbagai proyek React yang berbeda. Dia telah menerbitkan dua paket npm WordExpress yang bekerja bersama: skema wordexpress (menangani skema GraphQL dan pengaturan koneksi) dan komponen wordexpress (saat ini menampung dua komponen pertama, WordExpressPage dan WordExpressMenu). Karena proyek ini dibangun di atas Node.js, pengembang dapat menggunakan paket npm apa pun yang mereka inginkan, sebuah hiburan untuk kompatibilitas plugin yang terbatas.

GraphQL dan WP REST API

Banyak dari mereka yang memprediksi bahwa GraphQL akan menjadi pengganti langsung untuk REST juga berpendapat bahwa keduanya dapat hidup berdampingan. Faktanya, Facebook baru-baru ini menulis panduan untuk membungkus REST API di GraphQL.

“Kemungkinan jika GraphQL terbukti efektif, itu akan berdampingan dengan REST API,” kata Petr Bela. “Beberapa API akan menggunakan REST, beberapa akan menggunakan GraphQL. Beberapa mungkin mendukung keduanya.” Dia memperkirakan bahwa industri akan membutuhkan waktu bertahun-tahun, bahkan mungkin satu dekade, untuk sepenuhnya beralih dari REST ke GraphQL.

WordExpress Lanier, yang baru-baru ini melewati 1.000 bintang di GitHub, saat ini merupakan satu-satunya proyek open source yang secara publik mengeksplorasi implementasi WordPress yang didukung GraphQL. Pencarian sepintas di GitHub mengungkapkan bahwa banyak orang lain yang bereksperimen dengan pengaturan serupa. Untungnya, GraphQL tidak memerlukan perubahan apa pun pada inti WordPress untuk memungkinkan situs menggunakan API untuk menanyakan database.

Lanier mengatakan dia menghargai pekerjaan mereka yang mencoba menggabungkan WP REST API menjadi inti dan tidak melihat implementasi GraphQL sebagai ancaman untuk itu.

“Saya pikir pekerjaan yang mereka lakukan dengan REST API adalah hal yang bagus,” katanya. “Mereka pasti perlu mengambil langkah itu. REST sudah ada sejak lama – GraphQL masih cukup baru, jadi masuk akal untuk memilih rute REST. Selain itu, semakin banyak orang yang tahu cara menggunakannya. Hal yang menyenangkan tentang GraphQL adalah Anda dapat menggunakannya untuk membungkus REST API, sehingga keduanya dapat hidup berdampingan.”

Kemungkinan WordExpress melampaui bukti konsep sederhana tergantung pada umpan balik dari komunitas. Lanier mengatakan pengembang menunjukkan minat pada WordExpress dengan mem-fork-nya dan mengajukan pertanyaan.

“Orang-orang menggunakannya dan bermain-main dan (semoga) menjadikannya milik mereka sendiri,” katanya. “Saya kira minat itu ada. Namun, untuk membuatnya benar-benar layak, Anda memerlukan seluruh tim pengembang yang menjadikannya opsi terbaik.”

Lanier baru-baru ini mengambil pekerjaan baru di mana dia menggunakan React 100% dan belum memiliki kesempatan untuk menggunakan WordPress untuk sementara waktu tetapi mengatakan dia terbuka untuk mengeksplorasi kolaborasi untuk membuat produksi WordExpress siap.

“Jika orang benar-benar tertarik dan ingin bersama-sama mengembangkannya menjadi solusi yang layak, saya akan 100% terlibat di dalamnya,” katanya.

Pengembang yang ingin mengujinya dan mulai mengembangkan dengan WordExpress akan membutuhkan pemahaman dasar tentang cara kerja React. Lanier telah menulis dokumentasi terperinci tentang bagaimana implementasi GraphQL diatur dan bagaimana memperluas kueri GraphQL dan model database. Situs WordExpress.io adalah demo langsung dari kode tersebut, yang dapat Anda temukan di GitHub.