Gatsby 是一個基於 React 的強大靜態網站產生器，使開發人員能夠建立快速且可擴展的網站和應用程式。建立有效網站的關鍵方面之一是向使用者有效地顯示資料。在 Gatsby 中，可以結合使用 GraphQL、React 元件和 Headless CMS、API 和本機檔案等第三方資料來源來實現資料顯示。
在本文中，我們將探討在 Gatsby 應用程式中取得和顯示資料的過程，並專注於有效渲染資料的關鍵原則、策略和最佳實踐。
Gatsby 的資料層是圍繞 GraphQL 構建的，它充當一種查詢語言，允許開發人員準確地請求他們需要的資料。 Gatsby 與 GraphQL 深度集成，可輕鬆從 Markdown 文件、JSON 文件或外部 API 等各種來源提取數據，並將其顯示在 React 元件中。
在 Gatsby 中顯示資料的步驟通常包括：
Gatsby 隨附的 GraphQL 層，可讓您輕鬆存取資料來源。您可以使用 GraphQL 查詢從下列位置擷取資料：
假設您正在建立一個博客，並且您已經在 Markdown 文件中編寫了您的帖子。您可以使用 Gatsby 的 gatsby-transformer-remark 插件查詢 Markdown 文件並在 React 元件中顯示內容。
export const query = graphql`
query BlogPostQuery {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date
}
excerpt
}
}
}
}
`
然後，您可以使用 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>
)
如果您使用的是 Contentful 這樣的無頭 CMS，您可以透過安裝 gatsby-source-contentful 插件來查詢數據，該插件將 Gatsby 與 Contentful 的 API 整合在一起。以下是從 Contentful 取得部落格文章的範例：
export const query = graphql`
query ContentfulBlogPostQuery {
allContentfulBlogPost {
edges {
node {
title
publishedDate(formatString: "MMMM Do, YYYY")
body {
childMarkdownRemark {
excerpt
}
}
}
}
}
}
`
您現在可以像使用 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>
)
雖然 Gatsby 的靜態資料來源（例如 Markdown、CMS）很棒，但在某些情況下您可能需要從 API 動態取得外部資料。您可以使用React中的useEffect鉤子來取得資料並將其顯示在客戶端。例如，以下是如何從 REST 端點或 GraphQL 服務等外部 API 取得資料的方法：
import React, { useEffect, useState } from "react";
const DataDisplay = () => {
const [data, setData] = useState([]);
useEffect(() => {
// Fetch data from an external API
fetch('https://api.蓋茲比的數據顯示.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;
Gatsby 提供了多種最佳化資料顯示和增強效能的方法：
顯示大型資料集時，必須對資料進行分頁以縮短頁面載入時間並使內容更易於管理。 Gatsby 的 createPages API 可用於動態生成分頁頁面。
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>
);
};
延遲載入是一種延遲載入非必要資源、提高效能的技術。例如，Gatsby 的 gatsby-image 可以優化圖像，React.lazy 或動態導入可以推遲元件的載入。
import { LazyLoadImage } from 'react-lazy-load-image-component';
<lazyloadimage alt="蓋茲比的數據顯示" height="{300}" effect="blur" src="path/to/image.jpg"></lazyloadimage>
Gatsby 的建置過程將頁面預先渲染為靜態 HTML，顯著提高了效能。但是，它還允許您使用客戶端渲染在運行時獲取和注入動態內容。
有效地顯示資料有時涉及圖表和圖形等視覺化。您可以將資料視覺化程式庫（例如 Chart.js 或 D3.js）整合到您的 Gatsby 專案中以呈現視覺化資料表示。
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>
);
由於 Gatsby 與 GraphQL 的整合及其基於 React 的架構，在 Gatsby 中顯示資料是一個靈活且高效的過程。無論您是從本地文件、CMS 還是 API 獲取數據，Gatsby 都為建立具有豐富數據顯示功能的高效能 Web 應用程式提供了堅實的基礎。透過實施分頁、延遲載入和其他優化技術，您可以確保您的 Gatsby 網站即使在處理大型資料集時也能保持快速和回應能力。
以上是蓋茲比的數據顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
