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 }) => (
  

    {data.allMarkdownRemark.edges.map(({ node }) => (
      

        
{node.frontmatter.title}
        
{node.excerpt}
        {node.frontmatter.date}
      
    ))}
  
)

示例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 }) => (
  

    {data.allContentfulBlogPost.edges.map(({ node }) => (
      

        
{node.title}
        
{node.body.childMarkdownRemark.excerpt}
        {node.publishedDate}
      
    ))}
  
)

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.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    

      {data.map(item => (
        

          
{item.name}
          
{item.description}
        
      ))}
    
  );
};

export default DataDisplay;

4. 使用 Gatsby 优化数据显示

Gatsby 提供了多种优化数据显示和增强性能的方法：

分页

显示大型数据集时，必须对数据进行分页以缩短页面加载时间并使内容更易于管理。 Gatsby 的 createPages API 可用于动态生成分页页面。

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

  return (
    

      {data.allMarkdownRemark.edges.map(({ node }) => (
        

          
{node.frontmatter.title}
          
{node.excerpt}
        
      ))}

      
  );
};

延迟加载

延迟加载是一种推迟加载非必要资源、提高性能的技术。例如，Gatsby 的 gatsby-image 可以优化图像，React.lazy 或动态导入可以推迟组件的加载。

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

静态站点生成

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 = () => (
  

    
Sales Over Time
    
);

结论

由于 Gatsby 与 GraphQL 的集成及其基于 React 的架构，在 Gatsby 中显示数据是一个灵活高效的过程。无论您是从本地文件、CMS 还是 API 获取数据，Gatsby 都为构建具有丰富数据显示功能的高性能 Web 应用程序提供了坚实的基础。通过实施分页、延迟加载和其他优化技术，您可以确保您的 Gatsby 站点即使在处理大型数据集时也能保持快速和响应能力。