Menggunakan komponen alih-alih graf

Gato GraphQL tidak menggunakan graf untuk merepresentasikan model data. Sebaliknya, ia menggunakan komponen.

Ini bukan pendekatan yang tidak terduga. Di bawah judul Thinking in Graphs, proyek GraphQL menyatakan (penekanan ditambahkan):

Graf adalah alat yang ampuh untuk memodelkan banyak fenomena dunia nyata karena menyerupai model mental alami dan deskripsi verbal kita tentang proses yang mendasarinya. Dengan GraphQL, Anda memodelkan domain bisnis Anda sebagai graf dengan mendefinisikan sebuah skema; dalam skema Anda, Anda mendefinisikan berbagai jenis node dan bagaimana mereka terhubung/berelasi satu sama lain. Di sisi klien, ini menciptakan pola yang mirip dengan Pemrograman Berorientasi Objek: tipe yang mereferensikan tipe lain. Di sisi server, karena GraphQL hanya mendefinisikan antarmuka, Anda bebas menggunakannya dengan backend apa pun (baru maupun lama!).

Kesimpulan dari definisi ini adalah sebagai berikut:

Meskipun respons memiliki bentuk graf, ini tidak berarti bahwa data sebenarnya direpresentasikan sebagai graf saat menanganinya di sisi server. Graf hanyalah sebuah model mental, bukan implementasi nyata.

Ini adalah kabar baik, karena menangani graf (atau pohon) tidaklah mudah. Komponen, sebaliknya, jauh lebih sederhana untuk diimplementasikan dan memberikan semua manfaat yang sama.

Menyederhanakan model data melalui komponen

Menggunakan komponen untuk merepresentasikan struktur data di sisi server adalah pendekatan yang optimal dari segi kesederhanaan, karena memungkinkan konsolidasi berbagai model untuk data kita ke dalam satu struktur tunggal. Alih-alih memiliki alur seperti ini:

membangun query untuk memberi data ke komponen (klien) => memproses data sebagai graf/pohon (server) => memberi data ke komponen (klien)

...alur kita akan menjadi seperti ini:

komponen (klien) => komponen (server) => komponen (klien)

Hal ini dapat dicapai karena permintaan GraphQL dapat dianggap memiliki struktur data "hierarki komponen", di mana setiap tipe objek merepresentasikan sebuah komponen, dan setiap field relasional dari satu tipe objek ke tipe objek lainnya merepresentasikan sebuah komponen yang membungkus komponen lain.

Mari gunakan sebuah contoh untuk memvisualisasikan hubungan ini dari komponen ke query GraphQL. Katakanlah kita ingin membangun widget "Featured director" berikut:

Menggunakan Vue atau React (atau pustaka berbasis komponen lainnya), kita pertama-tama akan mengidentifikasi komponen-komponennya. Dalam kasus ini, kita akan memiliki komponen luar <FeaturedDirector> (berwarna merah), yang membungkus komponen <Film> (berwarna biru), yang sendirinya membungkus komponen <Actor> (berwarna hijau):

Pseudo-code-nya akan terlihat seperti ini:

<!-- Component: <FeaturedDirector> -->
<div>
  Country: {country}
  {foreach films as film}
    <Film film={film} />
  {/foreach}
</div>
 
<!-- Component: <Film> -->
<div>
  Title: {title}
  Pic: {thumbnail}
  {foreach actors as actor}
    <Actor actor={actor} />
  {/foreach}
</div>
 
<!-- Component: <Actor> -->
<div>
  Name: {name}
  Photo: {avatar}
</div>

Kemudian kita mengidentifikasi data apa yang dibutuhkan oleh setiap komponen. Untuk <FeaturedDirector> kita membutuhkan name, avatar, dan country. Untuk <Film> kita membutuhkan thumbnail dan title. Dan untuk <Actor> kita membutuhkan name dan avatar:

Dan kita membangun query GraphQL kita untuk mengambil data yang diperlukan:

query {
  featuredDirector {
    name
    country
    avatar
    films {
      title
      thumbnail
      actors {
        name
        avatar
      }
    }
  }
}

Seperti yang dapat dilihat, terdapat hubungan langsung antara hierarki komponen di atas dan query GraphQL ini.

​Menyederhanakan model data melalui komponen

Menyederhanakan model data melalui komponen