Latihan - Menambahkan data ke aplikasi Gatsby Anda

  • 6 menit

Kemampuan membuat kueri Gatsby memungkinkan Anda membuat situs statis dari data yang dikumpulkan dari berbagai sumber.

Di sini, Anda akan membuat kueri untuk mengambil beberapa data dari file konfigurasi dan merendernya ke dalam halaman.

Menambahkan data ke komponen Anda

Cara Anda bekerja dengan data di Gatsby sangat kuat. Gatsby dapat membuat kueri data hampir dari mana saja, dari file Anda, dari data statis dan bahkan data dari titik akhir API dan database. Untuk membuat kueri untuk data, kami akan menggunakan GraphQL.

gatsby-config.js adalah tempat Anda menyimpan metadata untuk situs Anda bersama dengan konfigurasi plugin dalam objek JavaScript. Ada properti di objek JavaScript yang disebut siteMetadata. Properti ini bersama dengan nilainya akan dibaca ke dalam grafik data sebagai bagian dari proses build dan disimpan dalam node yang disebut site. Anda akan melihat cara kerja membuat kueri untuk data dengan membuat komponen About untuk membuat kueri untuk judul dan deskripsi.

Di bawah ini adalah penggambaran seperti apa properti siteMetadata itu:

siteMetadata: {
  title: `Gatsby Default Starter`,
  description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
  author: `@gatsbyjs`,
}

Kita dapat membuat kueri yang diberikan di atas, membaca data dan membuat komponen merendernya.

Memulai server pengembangan

Mulai server pengembangan dengan mengetik perintah berikut di akar proyek Anda:

gatsby develop

Sekarang, Anda memiliki dua rute yang aktif dan menjalankan:

  • http://localhost:8000/, tempat aplikasi Anda dirender
  • http://localhost:8000/___graphql, tempat grafik data bawaan ditampilkan dengan GraphQL

Membuat kueri

Masuk ke http://localhost:8000/___graphql di browser Anda sehingga Anda bisa mendapatkan bantuan untuk membuat kueri.

Screenshot showing how to navigate to the Gatsby query.

Pada gambar di atas, Anda dapat melihat bagian Explorer di panel kiri. Anda dapat menggunakan Explorer untuk menelusuri paling detail grafik kami hingga Anda menemukan data yang Anda butuhkan. Di panel tengah Anda bisa melihat bagaimana kueri ditulis untuk Anda saat Anda melakukan pilihan di sebelah kiri. Di sebelah kanan Anda melihat hasil menjalankan kueri. Anda dapat menjalankan kueri dengan mengklik tombol putar di bagian tengah.

Kembali ke editor Visual Studio Code dan temukan file about.js di pages/ direktori. Ubah kontennya menjadi kode berikut:

import React from 'react';
import { Link, graphql } from 'gatsby';

export default ({ data }) => (
  <React.Fragment>
    <h2>{data.site.siteMetadata.title}</h2>
    <div>{data.site.siteMetadata.description}</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

export const query = graphql `
  query {
    site {
      siteMetadata {
        author,
        description,
        title
      }
    }
  }
`

Di sini, Anda memanggil fungsi graphql menggunakan kueri sebagai argumen dan menetapkannya ke variabel query. Sangat penting disebut query sehingga Gatsby tahu untuk memprosesnya dan memasukkan hasilnya ke dalam komponen dan waktu build.

Selama waktu build, Gatsby akan memasukkan hasil kueri ke properti data komponen seperti yang ditunjukkan di bawah, yang mana Anda dapat mereferensikannya dari JSX komponen Anda.

Simpan file dan telusuri http://localhost:8000/about dan Anda akan melihat yang berikut ini:

Screenshot showing the page component with data.

Anda telah menambahkan data ke komponen Anda dengan kueri GraphQL! Anda juga harus menggunakan alat kueri GraphQL dan server pengembangan Gatsby dalam prosesnya.