Belajar Gatsby - Data Fetching & GraphQL

#Pendahuluan

Gatsby berbeda dari kebanyakan framework: ia tidak memanggil API satu per satu, melainkan membangun satu data layer berisi seluruh data situs yang bisa di-query dengan GraphQL. Memahami pola ini adalah kunci memanfaatkan Gatsby secara maksimal.

Episode 5 membedah konsep query di Gatsby, perbedaan page query dan static query, cara menyediakan konten dari berbagai sumber, serta pola query gambar dan relasi konten.

#Memahami Data Layer Gatsby

#Satu Graph untuk Semua Data

Ketika plugin source menarik data — file, Markdown, JSON, CMS, atau API — Gatsby menyatukannya ke dalam sebuah graph. Kalian kemudian memakai GraphQL untuk mengambil data yang dibutuhkan. Karena dirender saat build time, query dieksekusi sekali saat build, bukan setiap request.

Semua query bisa dicoba dulu di GraphiQL di http://localhost:8000/___graphql sambil gatsby develop berjalan. Kebiasaan mencoba di GraphiQL sebelum menulis di kode akan menghemat banyak waktu.

#Query Sederhana

Contoh query untuk membaca metadata situs:

Query siteMetadata

query {
  site {
    siteMetadata {
      title
      description
    }
  }
}

#Page Query vs Static Query

#Page Query di Halaman dan Template

Page query dipakai di file page atau template dan dijalankan saat build. Definisikan sebagai export bernama query:

Page query dengan markdownRemark

import { graphql } from "gatsby"
 
export const query = graphql`
  query HalamanTentang {
    markdownRemark {
      frontmatter {
        title
      }
      html
    }
  }
`

Hasil query otomatis diteruskan sebagai prop data ke komponen halaman. Page query mendukung variabel, sehingga bisa disesuaikan per halaman lewat context — akan kita pakai di episode 9.

#Static Query di Komponen

Komponen non-page tidak boleh memakai page query. Gunakan useStaticQuery dari paket gatsby:

useStaticQuery di komponen

import { useStaticQuery, graphql } from "gatsby"
 
const Footer = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return <footer>{data.site.siteMetadata.title}</footer>
}

Satu komponen hanya boleh memanggil useStaticQuery satu kali.

#Sourcing Content dari Markdown, JSON, dan API

#Markdown dengan Transformer Plugin

File Markdown baru bisa di-query setelah dipasang transformer. Install tiga plugin berikut:

npm install gatsby-transformer-remark

Dengan gatsby-source-filesystem yang sudah dikonfigurasi di episode 3, plugin gatsby-transformer-remark mengubah File node menjadi MarkdownRemark node yang berisi frontmatter, html, dan excerpt.

#JSON dan YAML

Untuk data terstruktur, pasang transformer JSON dan YAML:

npm install gatsby-transformer-json gatsby-transformer-yaml

Setelah itu, file JSON di dalam folder yang di-source bisa di-query sebagai DataJson, dan YAML sebagai DataYaml. Pola ini cocok untuk data konfigurasi yang bersifat statis.

#API Eksternal

Data API bisa masuk lewat plugin seperti gatsby-source-graphql untuk GraphQL API, atau lewat custom source plugin yang akan kita bangun di episode 14. Semuanya akhirnya menjadi node yang sama-sama bisa di-query di data layer.

#Querying Image Data dan Relasi Konten

#Relasi Antar Konten

Data layer Gatsby bersifat relasional. Sebuah post bisa merujuk gambar yang dirender oleh Sharp:

Query gambar lewat relasi

query PostDenganGambar {
  markdownRemark {
    frontmatter {
      title
      featuredImage {
        childImageSharp {
          gatsbyImageData(layout: CONSTRAINED)
        }
      }
    }
  }
}

Relasi frontmatter.featuredImage terbentuk karena source plugin menghubungkan path file ke node gambar. Ini salah satu alasan kenapa Gatsby sangat kuat untuk konten yang kaya media.

#Praktik Terbaik Query

Hanya minta field yang benar-benar dibutuhkan — GraphQL mengembalikan persis apa yang diminta. Hindari query raksasa yang mengambil seluruh node; gunakan argumen limit, filter, dan sort untuk mempersempit hasil. Semakin ramping query, semakin cepat build dan semakin kecil halaman.

#Penutup

Episode 5 membuka kekuatan inti Gatsby: data layer GraphQL. Kalian sekarang bisa membedakan page query dan static query, menyediakan konten dari Markdown, JSON, YAML, dan API, serta memanfaatkan relasi antar konten dan gambar.

Inti yang harus dibawa pulang:

• Data layer menyatukan semua sumber data dalam satu graph yang bisa di-query.
• Page query untuk halaman dan template; useStaticQuery untuk komponen.
• Markdown butuh gatsby-transformer-remark; JSON dan YAML butuh transformer masing-masing.
• GraphiQL di ___graphql adalah alat wajib untuk mencoba query.
• Relasi antar konten dan gambar terbentuk otomatis oleh source plugins.
• Hanya minta field yang dibutuhkan untuk build yang cepat.

Di episode 6 selanjutnya kita fokus pada images dan media optimization — gatsby-plugin-image dan Sharp untuk gambar responsif, lazy loading dan placeholder, serta penanganan audio dan video di halaman Gatsby.