在 GraphQL 查詢模板中使用 React 屬性（字符串）

Question

我在 Gatsby 博客中制作了一個可重用組件到 go 在博客文章的末尾，該組件采用文章的作者姓名，並呈現“關於作者”部分，從存儲在網站其他地方的作者生物中提取信息。

我已經制作了當 authorName 被硬編碼為字符串時可以工作的組件，但是我被困在如何從文章組件（作為 props.author 傳遞）中獲取作者姓名到 GraphQl 查詢中。

我可以確認： 1. 正確傳遞了道具作者，控制台日志完全正確 2. 根據硬編碼字符串作者姓名從團隊簡歷中提取了正確的個人信息和個人資料圖片

缺少的鏈接是用 props.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

您不能在 static 查詢中進行字符串插值或類似的操作。 原因是在構建時需要知道 static 查詢。 那是它被執行的時候。 它在您構建站點時運行，而不是在站點運行時運行。 那是 static 的一部分，不僅是 StaticQuery，而且是一般的 Gatsby。 PageQueries 中可能沒有“靜態”，但它們也運行構建時間。 唯一的區別是它們確實允許使用 arguments，但與您在這里嘗試的方式不同。

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

注意在上下文 object 中傳遞的兩個變量。 現在在您的頁面元素中，您可以將這兩個變量傳遞給您的查詢。 $autoId 變量和 $slug 變量。 在博客頁面上，您將需要博客文章內容，但我確信您已經處理了該部分，以及作者詳細信息以顯示有關作者的信息。 在 PageQuery 中，您可以簡單地請求兩個實體。 一個用於博文，另一個用於作者。

Answer 3

感謝以上所有答案； 我有限的 GraphQL 知識並沒有成功，在這個階段，我不想深入研究 - 我只有一個 GraphQL 的用例。

所以我深入研究了一些文檔，發現了這個：https://www.gatsbyjs.org/docs/gatsby-config/#mapping-node-types ，它運行良好，實現起來非常簡單，專為精確而設計我需要它的原因（博客作者生物信息）。

我很遺憾沒有早點找到這個並防止不必要的問題，但我希望這對將來的某人有所幫助。

再次感謝。

Answer 4

由於您使用的是模板字符串，因此您可以添加像 ${variableName} 這樣的變量。 我希望這應該有效：

query={graphql`
        query {
          copy: markdownRemark(
            frontmatter: { name: { eq: ${props.author} } }
          ) {
            html
            frontmatter {
              name
              profileImage {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            }
          }
        }
      `}

謝謝