在 GraphQL 查询模板中使用 React prop（字符串）

Question

我正在 Gatsby 博客中制作一个可重用的组件，放在博客文章的末尾，它采用文章的作者姓名，并呈现“关于作者”部分，从存储在网站其他地方的作者简历中提取信息。

我已经制作了在 authorName 被硬编码为字符串时工作的组件，但我坚持如何从文章组件（作为 props.author 传递）获取作者姓名到 GraphQl 查询中。

我可以确认： 1. 正确传递了道具作者并且控制台日志完全正确 2. 根据硬编码字符串作者姓名从团队 bios 中提取正确的个人信息和个人资料图片

缺少的链接是将硬编码的作者姓名字符串替换为 props.author

在此先感谢您的帮助; 我已经查看了类似的问题，但找不到答案。

这是我的组件：

关于Author.js

import React from "react";

import { StaticQuery, graphql } from "gatsby";

import Img from "gatsby-image";

export default (props) => (

  <div>

    <StaticQuery

      query={graphql`

        query {

          copy: markdownRemark(

            frontmatter: { name: { eq: "need to replace this string with props.author" } }

          ) {

            html

            frontmatter {

              name

              profileImage {

              childImageSharp {

                fluid(maxWidth: 800) {

                  ...GatsbyImageSharpFluid

                }

              }

            }

            }

          }

        }

      `}

      render={data => (

        <React.Fragment>

          <p>Testing Name: {props.author}</p> // testing the author name is passed ok, will be removed

          <Img

            fluid={data.copy.frontmatter.profileImage.childImageSharp.fluid}

            alt=""

          />

          <div>

            <span>

              {data.copy.frontmatter.name}

            </span>

            <div

              dangerouslySetInnerHTML={{ __html: data.copy.html }}

            />

          </div>

        </React.Fragment>

      )}

    />

  </div>

);

Answer 1

查看有关StaticQuery 与页面查询有何不同的文档StaticQuery 可以做页面查询可以做的大部分事情，包括片段。主要区别是：页面查询可以接受变量（通过 pageContext）但只能添加到页面组件StaticQuery 不接受变量（因此得名“静态”），但可以在任何组件中使用，包括页面StaticQuery 不适用于原始 React.createElement 调用；请使用 JSX，例如<StaticQuery />

Answer 2

您不能在静态查询中进行字符串插值或类似操作。原因是在构建时需要知道静态查询。那就是执行的时候。它在您构建网站时运行，而不是在网站上线时运行。这不仅是 StaticQuery 的静态部分，也是一般 Gatsby 的静态部分。PageQueries 中可能没有“静态”，但它们也运行构建时间。唯一的区别是它们确实允许使用参数，无论是以与您在此处尝试使用的方式不同的方式。如果这是在使用createPagesAPI自动生成的页面上，您应该将一些标识符向下传递给页面，然后它可以在 PageQuery 中使用它来获取数据。据我所知，这看起来不像是您的页面元素。这是您在博客文章的底部显示有关作者的一些详细信息吗？看起来您的作者和博客页面都有一个单独的实体。那挺好的。实现这一点的一种方法是确保在 PageQuery 中查询所有必要信息。如果您的页面组件中有数据，您可以简单地将其传递给其子组件。您只需要使用上下文获取 PageComponent 的所有必要标识符。这是 Gatsby 文档中的显示方式：exports.createPages = ({ graphql, actions }) => {&nbsp; const { createPage } = actions&nbsp; const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)&nbsp; return graphql(`&nbsp; &nbsp; query loadPagesQuery ($limit: Int!) {&nbsp; &nbsp; &nbsp; allMarkdownRemark(limit: $limit) {&nbsp; &nbsp; &nbsp; &nbsp; edges {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; node {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; frontmatter {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slug&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; `, { limit: 1000 }).then(result => {&nbsp; &nbsp; if (result.errors) {&nbsp; &nbsp; &nbsp; throw result.errors&nbsp; &nbsp; }&nbsp; &nbsp; result.data.allMarkdownRemark.edges.forEach(edge => {&nbsp; &nbsp; &nbsp; createPage({&nbsp; &nbsp; &nbsp; &nbsp; path: `${edge.node.frontmatter.slug}`,&nbsp; &nbsp; &nbsp; &nbsp; component: blogPostTemplate,&nbsp; &nbsp; &nbsp; &nbsp; context: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // You need the something to query the author by, and something to query&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the blog post by.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; author: edge.node.frontmatter.authorId, // or whatever you use to identify authors&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slug: edge.node.frontmatter.slug&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; })}注意在上下文对象内部传递的两个变量。现在在您的页面元素中，您有这两个可以传递给查询的变量。$autoId 变量和 $slug 变量。在博客页面上，您将需要博客文章内容，但我相信您已经处理了这部分内容，以及用于显示作者信息的作者详细信息。在 PageQuery 中，您可以简单地请求两个实体。一个用于博文，另一个用于作者。

Answer 3

我有限的 GraphQL 知识没有成功，在这个阶段我不想深入研究它 - 我只有一个 GraphQL 用例。所以我更深入地研究了文档，发现了这个：https&nbsp;:&nbsp;//www.gatsbyjs.org/docs/gatsby-config/#mapping-node-types，它运行良好，实施起来非常简单，专为精确我需要它的原因（博客作者生物信息）。我很遗憾没有更早地发现这一点并防止出现不必要的问题，但我希望这对将来的人有所帮助。再次感谢。