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

Question

我正在 Gatsby 博客中制作一个可重用的组件，放在博客文章的末尾，它采用文章的作者姓名，并呈现“关于作者”部分，从存储在网站其他地方的作者简历中提取信息。我已经制作了在 authorName 被硬编码为字符串时工作的组件，但我坚持如何从文章组件（作为 props.author 传递）获取作者姓名到 GraphQl 查询中。我可以确认： 1. 正确传递了道具作者并且控制台日志完全正确 2. 根据硬编码字符串作者姓名从团队 bios 中提取正确的个人信息和个人资料图片缺少的链接是将硬编码的作者姓名字符串替换为 props.author在此先感谢您的帮助; 我已经查看了类似的问题，但找不到答案。这是我的组件：关于Author.jsimport 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 }) => {

  const { createPage } = actions

  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)

  return graphql(`

    query loadPagesQuery ($limit: Int!) {

      allMarkdownRemark(limit: $limit) {

        edges {

          node {

            frontmatter {

              slug

            }

          }

        }

      }

    }

  `, { limit: 1000 }).then(result => {

    if (result.errors) {

      throw result.errors

    }

    result.data.allMarkdownRemark.edges.forEach(edge => {

      createPage({

        path: `${edge.node.frontmatter.slug}`,

        component: blogPostTemplate,

        context: {

          // You need the something to query the author by, and something to query

          // the blog post by.

          author: edge.node.frontmatter.authorId, // or whatever you use to identify authors

          slug: edge.node.frontmatter.slug

        },

      })

    })

  })

}

注意在上下文对象内部传递的两个变量。现在在您的页面元素中，您有这两个可以传递给查询的变量。$autoId 变量和 $slug 变量。在博客页面上，您将需要博客文章内容，但我相信您已经处理了这部分内容，以及用于显示作者信息的作者详细信息。在 PageQuery 中，您可以简单地请求两个实体。一个用于博文，另一个用于作者。

Answer 3

我有限的 GraphQL 知识没有成功，在这个阶段我不想深入研究它 - 我只有一个 GraphQL 用例。

所以我更深入地研究了文档，发现了这个：https : //www.gatsbyjs.org/docs/gatsby-config/#mapping-node-types，它运行良好，实施起来非常简单，专为精确我需要它的原因（博客作者生物信息）。

我很遗憾没有更早地发现这一点并防止出现不必要的问题，但我希望这对将来的人有所帮助。

再次感谢。