盖茨比乔布斯

The useStaticQuery React Hook was added to Gatsby.js starting with version 2.1.0, and it’s an incredibly convenient way to make (build-time) GraphQL queries from any component within a Gatsby site. In this quick lesson, we’ll go over how to implement useStaticQuery in your project!

从2.1.0版开始， useStaticQuery React Hook已添加到Gatsby.js中 ，这是从Gatsby站点内的任何组件进行(生成时)GraphQL查询的一种非常方便的方法。 在本快速课程中，我们将介绍如何在您的项目中实现useStaticQuery ！

概述和要求 (Overview and Requirements)

For this simple example, we’re going to add a ContactInfo component to our website. This will just be a re-usable component that fetches and displays some contact info from your Gatsby site’s siteMetadata configuration. Let’s get started!

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

This lesson only has one requirement: that you already have a Gatsby project set up, and you’re ready to edit along with me! If you need help getting to that point, just follow along with the intro tutorial in the Your First Steps with Gatsby v2 post, and then come back here.

本课仅有一个要求：您已经设置了一个Gatsby项目，并且可以和我一起编辑了！ 如果您需要帮助，请按照“使用Gatsby的第一步” v2帖子中的入门教程进行操作，然后返回此处。

添加联系信息 (Add Contact Info)

To begin, let’s add some extra contact info to the siteMetadata object inside the gatsby-config.js file. To keep it simple, we will just add a phone number and an email address:

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

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

创建组件 (Create the Component)

With our contact data in place, we just need to make a component that fetches and displays it. And of course, we’ll make use of the useStaticQuery Hook to do it!

有了我们的联系数据，我们只需要制作一个获取并显示它的组件。 当然，我们将利用useStaticQuery Hook做到这一点！

Let’s create a new file at /components/ContactInfo.js, and then add the following code:

让我们在/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;

See how simple this is? No confusing render props to deal with, and we’re making a GraphQL query within a non-page component! 🎉

看看这有多简单？ 没有令人困惑的渲染道具要处理，我们正在非页面组件内进行GraphQL查询！ 🎉

You can now include this component anywhere on your site to display the contact info, and anytime you change these settings in siteMetadata they will update site-wide.

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

Note that this data does not have to come from siteMetaData! You could fetch data from any source where you would make a GraphQL query, such as fetching a list of recent blog posts, customer ratings, or upcoming product releases.

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

例外情况 (Exceptions)

While useStaticQuery is incredibly useful, it currently has two limitations:

尽管useStaticQuery非常有用，但目前有两个限制：

• When using useStaticQuery, you cannot use variables within GraphQL queries. (It’s called useStaticQuery for a reason, after all! 😁) You still have to do those via page-level queries.

  使用useStaticQuery ，不能在GraphQL查询中使用变量。 ( useStaticQuery有一个原因，它称为useStaticQuery ！😁)您仍然必须通过页面级查询来执行这些操作。

• You can only use one instance of useStaticQuery per component. (But you can make several queries inside it! You could query siteMetadata, recent posts, and more all via one query/instance.)

  每个组件只能使用一个useStaticQuery实例。 (但是您可以在其中进行几个查询！您可以通过一个查询/实例查询siteMetadata，最新帖子等)。

结论 (Conclusion)

As you can see, Gatsby’s built-in useStaticQuery Hook is an extremely useful and easy-to-use feature to incorporate into your Gatsby Toolbelt! I use it quite frequently, particularly for things like recent blog posts or product releases. (And yes, I have even used it for meta/contact info! 👍)

如您所见，Gatsby的内置useStaticQuery Hook是一项非常有用且易于使用的功能，可以整合到您的Gatsby Toolbelt中 ！ 我经常使用它，尤其是在最近的博客文章或产品发布中。 (是的，我什至将它用于元数据/联系信息！👍)

For more detailed info and examples, I recommend heading over to Gatsby’s official documentation on useStaticQuery. Like always, their docs are well-written and heavily maintained, so that page will always provide the most up-to-date information and examples!

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

翻译自: https://www.digitalocean.com/community/tutorials/gatsbyjs-usestaticquery-hook-in-gatsby

盖茨比乔布斯