Используйте React prop (string) в шаблоне запросов GraphQL

Question

Я делаю повторно используемый компонент в блоге Гэтсби, чтобы перейти в конец статей блога, в котором берется authorName статьи и отображается раздел «Об авторе», извлекающий информацию из биографии автора, хранящуюся в другом месте насайт.

Я создал компонент, который работает, когда authorName жестко запрограммирован как строка, но я застрял в том, как получить имя автора из компонента статьи (переданного как props.author) в запрос GraphQl.

Я могу подтвердить, что: 1. Автор проповеди проходит правильно, и консоль записывает точно правильно 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}
            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

Благодаря всем вышеперечисленным ответам;У меня не было успеха с моими ограниченными знаниями GraphQL, и на данном этапе я не хочу углубляться в это - у меня есть только один вариант использования GraphQL.

Итак, я углубился в документы и обнаружил следующее: https://www.gatsbyjs.org/docs/gatsby-config/#mapping-node-types, который отлично работает, очень прост в реализации и разработан именно по той причине, в которой я нуждался (биоинформация автора блога).

Я сожалею, что не нашел этого раньше и не допустил ненужного вопроса, но надеюсь, что это поможет кому-то в будущем.

Еще раз спасибо.

Answer 3

Вы не можете выполнять интерполяцию строк или что-либо подобное в статических запросах. Причина в том, что статический запрос должен быть известен во время сборки. Вот когда это выполняется. Он запускается, когда вы создаете сайт, а не когда сайт работает. Это статическая часть не только StaticQuery, но и Гэтсби в целом. PageQueries может не иметь «статического» в них, но они также запускают время сборки. Единственное отличие состоит в том, что они допускают использование аргументов, будь то иначе, чем вы пытаетесь сделать это здесь.

Если это на какой-то автоматически сгенерированной странице с использованием createPages APIВы должны передать какой-то идентификатор на страницу, который он затем может использовать в PageQuery для извлечения данных. Из того, что я могу сказать здесь, это не похоже, что это элемент вашей страницы. Это нижняя часть блога, где вы показываете некоторые детали об авторе? Похоже, у вас есть отдельная сущность для ваших авторов и страниц вашего блога. Это хорошо. Один из способов добиться этого - убедиться, что вы запрашиваете всю необходимую информацию в своем PageQuery. Если у вас есть данные в компоненте вашей страницы, вы можете просто передать их своим дочерним элементам. Вам просто нужно получить все необходимые идентификаторы для PageComponent, используя контекст. Вот как это показано в документации Гэтсби:

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 вы можете просто запросить две сущности. Один для поста в блоге, другой для автора.