使用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 的官方文档。 像往常一样,他们的文档编写得很好并且维护得很好,因此该页面将始终提供最新的信息和示例!