Передать строку в GraphQL StaticQuery в Гэтсби

Question

Я пытаюсь понять, как StaticQuery работает в рабочем процессе Gatsby / GraphQL, и в качестве пробной версии я хочу создать заголовок статьи с фоновым изображением.

Изображение определено в frontmatter файла уценкиЯ строю из (frontmatter.feature).

Я знаю, что природа StaticQuery ... ну ... статическая, поэтому я не могу передать динамические переменные в запрос.Но это не то, что я делаю - я думаю.

Вот мой пример:

articleHeader(frontmatter) {
  if (frontmatter.feature) {
    return (
      <StaticQuery
        query={graphql`
          query($base: String!) {
            file(base: { eq: $base }) {
              publicURL
            }
          }
        `}
        render={data => (
          <ArticleHeader
            style={"background-image:url(" + data.file.publicURL + ")"}
          >
            <Heading>{frontmatter.title}</Heading>
          </ArticleHeader>
        )}
      />
    );
  } else return <Heading>{frontmatter.title}</Heading>;
}

Моя проблема в том, что я хочу передать frontmatter.feature своему запросу, чтобы я мог запросить base: { eq: $base } ... но как?

Примечание. Я правильно настроил плагины и могу без проблем запрашивать файлы через интерфейс graphiql.

Answer 1

Если вы измените frontmatter.feature так, чтобы это был относительный путь к вашему изображению, он превратится в узел File, что означает, что вы можете запросить publicURL там, где вы запрашиваете frontmatter:

export const query = graphql`
  allMarkdownRemark {
    nodes {
      frontmatter {
        title
        feature {
          publicURL
        }
      }
    }
  }
`

Тогда ваш компонент заголовка статьи может быть просто

const ArticleHeader = ({ frontmatter }) => {
  const { title, feature } = frontmatter
  if (!feature) return <Heading ... />
  return (
    <div style={`background-image:url(${feature.publicURL})`}>
      <Heading ...>
    </div>
  )
}

Answer 2

StaticQuery в настоящее время не принимает аргументы GraphQL. Вы можете использовать стандартные запросы с аргументами, взятыми из контекста на страницах Gatsby, поэтому, если вам нужен доступ к контексту, используйте запрос страницы.

StaticQuery может выполнять большинство действий, выполняемых запросом страницы, включая фрагменты. Основные отличия:

• запросы страницы могут принимать переменные (через pageContext), но могут быть добавлены только к компонентам страницы
• StaticQuery не принимает переменные (отсюда и название «статические»), но может использоваться в любом компоненте, включая страницы
• StaticQuery не работает с необработанными вызовами React.createElement; пожалуйста, используйте JSX, например

Чем StaticQuery отличается от запроса страницы