蓋茲比的數據顯示

Gatsby 是一個基於 React 的強大靜態網站產生器，使開發人員能夠建立快速且可擴展的網站和應用程式。建立有效網站的關鍵方面之一是向使用者有效地顯示資料。在 Gatsby 中，可以結合使用 GraphQL、React 元件和 Headless CMS、API 和本機檔案等第三方資料來源來實現資料顯示。

在本文中，我們將探討在 Gatsby 應用程式中取得和顯示資料的過程，並專注於有效渲染資料的關鍵原則、策略和最佳實踐。

1.了解Gatsby的資料層

Gatsby 的資料層是圍繞 GraphQL 構建的，它充當一種查詢語言，允許開發人員準確地請求他們需要的資料。 Gatsby 與 GraphQL 深度集成，可輕鬆從 Markdown 文件、JSON 文件或外部 API 等各種來源提取數據，並將其顯示在 React 元件中。

在 Gatsby 中顯示資料的步驟通常包括：

• 從外部或內部來源取得資料
• 使用 GraphQL 查詢建立資料
• 使用 React 元件顯示資料

2. 在 Gatsby 中設定 GraphQL 查詢

Gatsby 隨附的 GraphQL 層，可讓您輕鬆存取資料來源。您可以使用 GraphQL 查詢從下列位置擷取資料：

• 本地文件，例如 Markdown 或 JSON
• Contentful、Strapi 或 WordPress 等 CMS 平台
• API 與資料庫

範例1：查詢Markdown數據

假設您正在建立一個博客，並且您已經在 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>
)

範例2：從CMS查詢資料（Contentful）

如果您使用的是 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>
)

3. 透過API渲染外部數據

雖然 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;

4. 使用 Gatsby 優化數據顯示

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，顯著提高了效能。但是，它還允許您使用客戶端渲染在運行時獲取和注入動態內容。

5. Gatsby 的數據視覺化

有效地顯示資料有時涉及圖表和圖形等視覺化。您可以將資料視覺化程式庫（例如 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中文網其他相關文章！