从版本2.1.0开始，useStaticQueryReact Hook](https://www.gatsbyjs.org))被添加到Gatsby.js中，它是从Gatsby站点内的任何组件进行(构建时)图形QL查询的一种极其方便的方式。在这一课中，我们将介绍如何在您的项目中实现useStaticQuery！

概述及要求

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

本课程只有一个要求：您已经设置了一个Gatsby项目，并且您已经准备好与我一起编辑！如果您需要帮助才能做到这一点，只需按照Your First Steps With Gatsby v2》帖子中的介绍教程进行操作，然后返回此处。

添加联系人信息

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

1[label gatsby-config.js]
2siteMetadata: {
3  title: "Gator's Empanada Express",
4  siteUrl: "https://example-site.com/",
5  phone: "(555) 567-0123",
6  email: "[email protected]",
7}
8// plugins: { ... }

创建组件

准备好联系数据后，我们只需要创建一个组件来获取和显示它。当然，我们将使用`useStaticQuery‘钩子来完成这项工作！

让我们在/Components/ContactInfo.js中创建一个新文件，然后添加以下代码：

 1[label /components/ContactInfo.js]
 2import React from "react";
 3import { useStaticQuery, graphql } from "gatsby";
 4
 5const ContactInfo = () => {
 6  const data = useStaticQuery(graphql`
 7    query ContactInfoQuery {
 8      site {
 9        siteMetadata {
10          phone,
11          email
12        }
13      }
14    }
15  `);
16
17  const { phone, email } = data.site.siteMetadata;
18
19  return (
20    <div>
21      <h3>Contact Us:</h3>
22      <p>phone: {phone}</p>
23      <p>
24        email: <a href={`mailto:${email}`}>{email}</a>
25      </p>
26    </div>
27  )
28};
29
30export default ContactInfo;

看到这有多简单了吗？没有令人困惑的呈现道具需要处理，我们在非页面组件！ 🎉中进行图形查询

现在，您可以在站点的任何位置添加此组件以显示联系信息，并且当您在`siteMetadata‘中更改这些设置时，它们将在站点范围内更新。

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

例外情况

虽然useStaticQuery非常有用，但它目前有两个限制：

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

结论

正如你所看到的，Gatsby的内置useStaticQuery Hook是一个非常有用和易于使用的功能，可以集成到你的 Gatsby Toolbelt 中！我经常使用它，特别是最近的博客文章或产品发布。(And是的，我甚至用它作为Meta/contact info！👍)

有关更多详细信息和示例，我建议前往Gatsby的useStaticQuery官方文档。像往常一样，他们的文档写得很好，维护得很好，所以这个页面总是提供最新的信息和例子！