使用Gatsby的useStaticQueryHook快速指南

来自菜鸟教程
跳转至:导航、​搜索

useStaticQuery React Hook 被添加到 Gatsby.js 从版本 2.1.0 开始,这是一种非常方便的制作方式(构建时)来自 Gatsby 站点内 任何组件 的 GraphQL 查询。 在这个快速课程中,我们将介绍如何在您的项目中实现 useStaticQuery

概述和要求

对于这个简单的示例,我们将向我们的网站添加一个 ContactInfo 组件。 这只是一个可重用的组件,它从 Gatsby 站点的 siteMetadata 配置中获取并显示一些联系信息。 让我们开始吧!

本课只有一个要求:您已经建立了一个 Gatsby 项目,并且准备好和我一起编辑! 如果您需要帮助,请按照 使用 Gatsby v2 的第一步中的介绍教程进行操作,然后返回此处。

添加联系信息

首先,让我们在 gatsby-config.js 文件中的 siteMetadata 对象中添加一些额外的联系信息。 为简单起见,我们只需添加一个电话号码和一个电子邮件地址:

盖茨比-config.js

siteMetadata: {
  title: "Gator's Empanada Express",
  siteUrl: "https://example-site.com/",
  phone: "(555) 567-0123",
  email: "info@example-site.com",
}
// plugins: { ... }

创建组件

有了我们的联系人数据,我们只需要制作一个获取并显示它的组件。 当然,我们将使用 useStaticQuery Hook 来完成它!

让我们在/components/ContactInfo.js处新建一个文件,然后添加如下代码:

/components/ContactInfo.js

import React from "react";
import { useStaticQuery, graphql } from "gatsby";

const ContactInfo = () => {
  const data = useStaticQuery(graphql`
    query ContactInfoQuery {
      site {
        siteMetadata {
          phone,
          email
        }
      }
    }
  `);

  const { phone, email } = data.site.siteMetadata;

  return (
    <div>
      <h3>Contact Us:</h3>
      <p>phone: {phone}</p>
      <p>
        email: <a href={`mailto:${email}`}>{email}</a>
      </p>
    </div>
  )
};

export default ContactInfo;

看看这有多简单? 无需处理令人困惑的渲染道具,我们正在 非页面组件中进行 GraphQL 查询! 🎉

您现在可以在站点的任何位置包含此组件以显示联系信息,并且只要您在 siteMetadata 中更改这些设置,它们就会在站点范围内更新。

请注意,此数据不必来自 siteMetaData! 您可以从进行 GraphQL 查询的任何来源获取数据,例如获取最近的博客文章列表、客户评分或即将发布的产品。

例外

虽然 useStaticQuery 非常有用,但它目前有两个限制:

  • 使用 useStaticQuery 时,不能在 GraphQL 查询中使用变量。 (毕竟,它被称为 useStaticQuery 是有原因的! 😁) 你仍然需要通过页面级查询来完成这些。
  • 每个组件只能使用一个 useStaticQuery 实例。 (但您可以在其中进行多个查询! 您可以通过一个查询/实例查询站点元数据、最近的帖子等。)

结论

如您所见,Gatsby 内置的 useStaticQuery Hook 是一个非常有用且易于使用的功能,可以合并到您的 Gatsby Toolbelt 中! 我经常使用它,特别是对于最近的博客文章或产品发布之类的东西。 (是的,我什至将它用于元/联系信息! 👍)

有关更详细的信息和示例,我建议前往 Gatsby 的 关于 useStaticQuery 的官方文档。 像往常一样,他们的文档编写得很好并且维护得很好,因此该页面将始终提供最新的信息和示例!