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

Posted 2023-03-08

【中文标题】在 GraphQL 查询模板中使用 React 道具（字符串）

【英文标题】：Use a React prop (string) in GraphQL query template

【发布时间】：2020-02-16 00:18:56

【问题描述】：

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

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

我可以确认： 1. prop author 正确传递，控制台日志完全正确 2. 根据硬编码字符串作者姓名从团队简历中提取正确的简历信息和头像

缺少的链接是用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
            
          />
          <div>
            <span>
              data.copy.frontmatter.name
            </span>
            <div
              dangerouslySetInnerHTML= __html: data.copy.html 
            />
          </div>
        </React.Fragment>
      )
    />
  </div>
);

【问题讨论】：

添加到 ksav 的答案，我会让这个组件“笨拙”并从其父组件接收 postAuthor 数据

@DerekNguyen 感谢您的回复，但我不明白。该组件确实从其父组件（post body 组件）获取 postAuthor。在这种情况下，我不希望从帖子中呈现道具，而是使用 postAuthor 来“搜索”作者的简历并呈现该数据。

【参考方案1】：

查看How StaticQuery differs from page query 的文档

StaticQuery 可以做页面查询可以做的大部分事情，包括片段。主要区别在于：

页面查询可以接受变量（通过 pageContext），但只能添加到页面组件中 StaticQuery 不接受变量（因此命名为“静态”），但可用于任何组件，包括页面 StaticQuery 不适用于原始 React.createElement 调用；请使用 JSX，例如<StaticQuery />

【参考方案2】：

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

如果这是在使用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
        ,
      )
    )
  )

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

【讨论】：

感谢@timmysmalls 的详细回答；不幸的是，我无法让它工作，但找到了我发布的另一种方法。谢谢

【参考方案3】：

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

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

我很遗憾没有早点发现这个问题并避免了不必要的问题，但我希望这对将来的人有所帮助。

再次感谢。