Question

我正在Gatsby博客中创建一个可重用的组件，以转到博客文章的末尾，该博客文章采用该文章的authorName，并呈现“关于作者”部分，从存储在网站其他位置的作者简介中提取信息现场。

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

我可以确认： 1.正确编写道具作者，并且控制台记录正确 2.根据硬编码的字符串作者姓名从团队的BIOS中提取了正确的生物信息和个人资料图片

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

预先感谢您的帮助；我已经审查了类似的问题，但找不到答案。

这是我的组件：

AboutAuthor.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

查看How StaticQuery differs from page query的文档

StaticQuery可以执行页面查询可以执行的大多数操作，包括片段。主要区别在于：


页面查询可以接受变量（通过pageContext），但只能添加到页面组件中

StaticQuery不接受变量（因此名称为“ static”），但可以在任何组件（包括页面）中使用

StaticQuery不适用于原始React.createElement调用；请使用JSX，例如<StaticQuery />

Answer 2

您不能在静态查询中执行字符串插值或类似的操作。原因是在构建时需要知道静态查询。那是执行的时候。它在您构建网站时运行，而不是在网站上线时运行。这不仅是StaticQuery的静态部分，还是Gatsby的静态部分。 PageQueries中可能没有'static'，但它们也运行构建时间。唯一的区别是它们确实允许使用参数，这与您在此处尝试使用的方式不同。

如果这是使用createPages API自动生成的某个页面上的内容，则应将某些标识符向下传递给该页面，然后可以在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
        },
      })
    })
  })
}

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

Answer 3

感谢以上所有答案；有限的GraphQL知识对我没有成功，在这个阶段，我不想深入学习-我只有一个GraphQL用例。

因此，我深入研究了文档，发现了这一点：https://www.gatsbyjs.org/docs/gatsby-config/#mapping-node-types可以正常工作，实现起来非常简单，并且是出于我需要它的确切原因而设计的（博客作者的个人信息）。

我很遗憾没有及早发现这个问题并避免了一个不必要的问题，但是希望这对以后的人有所帮助。

再次感谢。

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

3 个答案: