Paparan Data dalam Gatsby

Gatsby ialah penjana tapak statik yang berkuasa berdasarkan React yang membolehkan pembangun membina tapak web dan aplikasi yang pantas dan berskala. Salah satu aspek utama membina laman web yang berkesan ialah memaparkan data dengan cekap kepada pengguna. Dalam Gatsby, paparan data boleh dicapai menggunakan gabungan GraphQL, komponen React dan sumber data pihak ketiga seperti CMS tanpa kepala, API dan fail setempat.

Dalam artikel ini, kami akan meneroka proses mengambil dan memaparkan data dalam aplikasi Gatsby, memfokuskan pada prinsip utama, strategi dan amalan terbaik untuk memaparkan data dengan berkesan.

1. Memahami Lapisan Data Gatsby

Lapisan data Gatsby dibina di sekitar GraphQL, yang bertindak sebagai bahasa pertanyaan yang membolehkan pembangun meminta data yang mereka perlukan dengan tepat. Gatsby menyepadukan secara mendalam dengan GraphQL, menjadikannya mudah untuk menarik data daripada pelbagai sumber seperti fail Markdown, fail JSON atau API luaran dan memaparkannya dalam komponen React.

Langkah-langkah untuk memaparkan data dalam Gatsby biasanya termasuk:

• Mengambil data daripada sumber luaran atau dalaman
• Menstrukturkan data menggunakan pertanyaan GraphQL
• Memaparkan data menggunakan komponen React

2. Menyediakan Pertanyaan GraphQL dalam Gatsby

Gatsby dilengkapi dengan lapisan GraphQL terbina dalam yang membolehkan anda mengakses sumber data anda dengan mudah. Anda boleh menggunakan pertanyaan GraphQL untuk mengekstrak data daripada:

• Fail tempatan seperti Markdown atau JSON
• Platform CMS seperti Contentful, Strapi atau WordPress
• API dan pangkalan data

Contoh 1: Menyoal Data Markdown

Andaikan anda sedang membina blog dan anda telah menulis siaran anda dalam fail Markdown. Anda boleh menanyakan fail Markdown menggunakan pemalam gatsby-transformer-remark Gatsby dan memaparkan kandungan dalam komponen React anda.

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

Anda kemudiannya boleh memaparkan catatan blog yang diambil dalam komponen anda menggunakan JSX:

const Blog = ({ data }) => (
  <div>
    {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.frontmatter.title}</h2>
        <p>{node.excerpt}</p>
        <small>{node.frontmatter.date}</small>
      </div>
    ))}
  </div>
)

Contoh 2: Menyoal Data daripada CMS (Contentful)

Jika anda menggunakan CMS tanpa kepala seperti Contentful, anda boleh menanyakan data anda dengan memasang pemalam gatsby-source-contentful, yang menyepadukan Gatsby dengan API Contentful. Berikut ialah contoh mengambil catatan blog daripada Contentful:

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

Anda kini boleh memaparkan data sama seperti yang anda lakukan dengan Markdown:

const Blog = ({ data }) => (
  <div>
    {data.allContentfulBlogPost.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.title}</h2>
        <p>{node.body.childMarkdownRemark.excerpt}</p>
        <small>{node.publishedDate}</small>
      </div>
    ))}
  </div>
)

3. Memaparkan Data Luaran melalui API

Walaupun sumber data statik Gatsby (cth., Markdown, CMS) bagus, mungkin terdapat kes di mana anda perlu mengambil data luaran secara dinamik daripada API. Anda boleh menggunakan cangkuk useEffect dalam React untuk mengambil data dan memaparkannya pada sisi klien. Sebagai contoh, berikut ialah cara anda boleh mengambil data daripada API luaran seperti titik akhir REST atau perkhidmatan GraphQL:

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.Paparan Data dalam Gatsby.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key="{item.id}">
          <h2>{item.name}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default DataDisplay;

4. Mengoptimumkan Paparan Data dengan Gatsby

Gatsby menawarkan beberapa cara untuk mengoptimumkan paparan data dan meningkatkan prestasi:

penomboran

Apabila memaparkan set data yang besar, adalah penting untuk menomborkan data untuk meningkatkan masa pemuatan halaman dan menjadikan kandungan lebih mudah diurus. API createPages Gatsby boleh digunakan untuk menjana halaman bernombor secara dinamik.

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key="{node.id}">
          <h2>{node.frontmatter.title}</h2>
          <p>{node.excerpt}</p>
        </div>
      ))}

      <pagination currentpage="{currentPage}" numpages="{numPages}"></pagination>
    </div>
  );
};

Malas Memuatkan

Pemuatan malas ialah teknik yang menangguhkan pemuatan sumber yang tidak penting, meningkatkan prestasi. Contohnya, imej gatsby Gatsby boleh mengoptimumkan imej dan import React.lazy atau dinamik boleh menangguhkan pemuatan komponen.

import { LazyLoadImage } from 'react-lazy-load-image-component';

<lazyloadimage alt="Paparan Data dalam Gatsby" height="{300}" effect="blur" src="path/to/image.jpg"></lazyloadimage>

Penjanaan Tapak Statik

Proses binaan Gatsby pra-memaparkan halaman menjadi HTML statik, meningkatkan prestasi dengan ketara. Walau bagaimanapun, ia juga membolehkan anda mengambil dan menyuntik kandungan dinamik pada masa jalan menggunakan pemaparan sisi klien.

5. Visualisasi Data dengan Gatsby

Memaparkan data dengan berkesan kadangkala melibatkan visualisasi seperti carta dan graf. Anda boleh menyepadukan perpustakaan visualisasi data, seperti Chart.js atau D3.js, ke dalam projek Gatsby anda untuk memaparkan perwakilan data visual.

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  <div>
    <h2>Sales Over Time</h2>
    <line data="{data}"></line>
  </div>
);

Kesimpulan

Memaparkan data dalam Gatsby ialah proses yang fleksibel dan cekap, terima kasih kepada penyepaduan dengan GraphQL dan seni bina berasaskan React. Sama ada anda mengambil data daripada fail tempatan, CMS atau API, Gatsby menyediakan asas yang kukuh untuk membina aplikasi web berprestasi tinggi dengan keupayaan paparan data yang kaya. Dengan melaksanakan penomboran, memuatkan malas dan teknik pengoptimuman lain, anda boleh memastikan tapak Gatsby anda kekal pantas dan responsif, walaupun semasa mengendalikan set data yang besar.

Atas ialah kandungan terperinci Paparan Data dalam Gatsby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!