Menambahkan data ke aplikasi Gatsby Anda

  • 4 menit

Gatsby memiliki sistem plugin yang memindai berbagai sumber data dan menempatkan data yang dihasilkan dalam objek dalam memori, grafik data. Ini melakukan semua ini pada waktu build, jadi ketika Anda membuat halaman baru, Anda dapat mengasumsikan data dari grafik tersebut tersedia.

Alat

Grafik data adalah sesuatu yang dapat Anda ajak berinteraksi. Setelah Anda memulai server pengembangan, grafik data akan tersedia di http://localhost:8000/___graphql. Ini akan merender grafik data dalam alat yang disebut GraphQL.

GraphQL memungkinkan Anda melakukan hal berikut:

  • Navigasi: Telusuri paling detail grafik data dan kontennya dengan memperluas node untuk menemukan data yang Anda butuhkan saja.
  • Membuat kueri: Saat Anda menelusuri paling detail grafik, alat ini akan membuat kueri untuk Anda. Anda juga dapat mengedit teks kueri sesuai keinginan Anda untuk melihat hasilnya.
  • Menelusuri hasil: Jalankan kueri yang Anda buat untuk melihatnya dirender di alat. Anda akan tahu dengan tepat respons apa yang dirender kueri sebelum memberanian untuk menyertakannya dalam komponen.

Menggunakan data dalam komponen halaman

Saat Anda membuat komponen halaman yang ingin menggunakan data dari grafik yang disebutkan di atas, ada tiga hal yang akan Anda lakukan:

  1. Menentukan kueri. Buat kueri dalam bahasa kueri GraphQL yang meminta sumber daya dan beberapa kolom pada sumber daya tersebut.

  2. Menulis kode untuk Menjalankan kueri. Pada file .js halaman Anda, panggil fungsi graphql() dengan kueri Anda sebagai input dan simpan hasilnya dalam variabel bernama query. Berikut contohnya:

    export const query = graphql ("query {} ");

    Penamaan variabel query adalah konvensi penting: Gatsby akan secara otomatis memproses variabel query, mengambil data dan memasukkannya ke dalam komponen React pada file yang sama.

  3. Membuat komponen berparameter yang menggunakan data. Buat komponen React dengan parameter data. Saat Anda membuat aplikasi, data akan diisi dengan jawaban dari kueri Anda. Bentuk hasilnya terlihat persis seperti kueri yang Anda tulis. Di dalam bagian rendering komponen, Anda sekarang dapat membaca dari properti data dan mengatur tata letak datanya dalam templat dengan cara yang Anda anggap sesuai.

Contoh plugin: Memuat gambar dari file

Data bisa hampir apa saja. Gatsby membantu Anda menarik data dan menempatkannya di grafik datanya menggunakan plugin. Plugin gatsby-source-filesystem melihat sistem file Anda dan mengisi grafik datanya berdasarkan itu. Apa yang dilakukannya adalah melihat melalui sistem file, di tempat yang kami tentukan dan membuat hasilnya tersedia di Graph. Mari kita lihat bagaimana plugin ini dikonfigurasi dalam gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
},

Properti path memberi tahu kita tempat plugin ini harus mencari file. Dalam kasus kita, plugin mencari __dirname, yang merupakan direktori kerja saat ini dan khususnya sub direktori /images. Pada waktu pra-kompilasi, Gatsby sekarang akan melihat melalui direktori image/ dan mengumpulkan informasi pada file. Ini juga akan menambahkan informasi tersebut ke grafik data dalam memori Gatsby.

Jadi bagaimana kita menggunakan informasi tentang gambar yang kita konfigurasi melalui plugin gatsby-source-filesystem? Saat plugin memindaidirektori images/, plugin mengumpulkan informasi seperti jalur, jenis, ukuran, dan dimensi. Kemudian, kita dapat membuat kueri untuk informasi ini dari grafik data dalam memori dan menggunakannya untuk merender gambar melalui jalurnya yang disimpan dalam grafik. Selain itu, kita dapat melakukan berbagai manipulasi gambar pada gambar sebelum menampilkannya, seperti penskalaan misalnya. Fungsionalitas manipulasi gambar adalah sesuatu yang dibuat ke Gatsby dan tidak disediakan oleh plugin. Namun, fungsionalitas bawaan dan plugin ini bekerja bersamaan untuk menjadikannya pengalaman hebat untuk bekerja dengan aset gambar.

Plugin tambahan apa pun yang Anda tambahkan ke Gatsby harus mengikuti pola ini:

  1. Unduh plugin melalui npm.
  2. Konfigurasikan plugin melalui file gatsby-config.js.