Как передать значение в StaticQuery с помощью строки реквизита? - PullRequest
Новая
       31

Как передать значение в StaticQuery с помощью строки реквизита?

2 голосов
/ 28 января 2020

Я разрабатываю сайт в Гэтсби. js с блогом внутри и для макета поста, я кодирую этот заголовок с фоновым изображением, которое будет установлено автором поста. Я все еще на этапе разработки, размещаю элементы, пустые тексты и т. Д. c.

Я сделал этот компонент с помощью BackgroundImage, graphQL и StaticQuery и в его коде, если я сужу поиск изображения, полученного из gatsby-source-filesystem, с текстом "post_8.jpg", он работает нормально как и должно быть. 

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'
import BackgroundImage from 'gatsby-background-image'
import TextScramble from './TextScramble'


const BackgroundDiv = ({ className, children }) => (
  <StaticQuery 
    query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: "post_8.jpg"}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }
    render={data => {
      const imageData = data.file.childImageSharp.fluid
      return (
        <BackgroundImage
          Tag="div"
          className={className}
          fluid={imageData}
        >
    <h1 className="bg-white shaddow shadow-md py-1 px-4 w-auto inline-block text-4xl absolute bottom-0 mb-24"><TextScramble>{ children }</TextScramble></h1>
        </BackgroundImage>
      )}
    }
  />
)

export default BackgroundDiv

Однако мне интересно, как бы передать значение из frontmatter со страницы, содержащей сообщение, этому компоненту.

Я думал об использовании значения, переданного компоненту, такого как postName. Например: 

const BackgroundDiv = ({ className, children, postName }) => (

Затем он получит это значение в запросе в виде строки. 

query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: ${postName}}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }

Я сделал это простое дополнение выше, которое не сработало. При компиляции происходит сбой, сообщая мне 

String interpolation is not allowed in graphql tag:

    9 |     query={graphql`   
   10 |       query($postName: String! ) {
 > 11 |         file(relativePath: {eq: ${postName}}) {
      |                                ^^^^^^^^^^^   
   12 |           childImageSharp {   
   13 |             fluid {   
   14 |               ...GatsbyImageSharpFluid

 File: [$pathToFolder]/gatsby-theme-cripto/src/components/backgroundDiv.js

Я искал проблемы с интерполяцией строк в Google и даже закончил здесь, но я не мог связать это содержимое с моей проблемой. Я не опытный разработчик, поэтому я считаю, что что-то упустил. Мы будем благодарны за любые мысли по этому вопросу, точно так же, как любые запросы по кодам, которые я мог бы публиковать, чтобы помочь понять эту проблему.

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 28 января 2020

Краткий ответ: Вы не можете.

Следите за обсуждением на репозитории github . Если вы прокрутите до конца, похоже, что он будет доступен в следующих выпусках.

Обходной путь

  • Запрос всех данных.
  • Фильтр для уточнения c данных, которые вам нужны. Вы можете использовать переменные в функциях массива.

Здесь реализация с gatsby-image, которую я использую в своем проекте 

const Page = (props) => {
  const { data: { allFile: { edges } } } = props;
  const oneImage = edges.filter(edge => // filter with your variable
    edge.node.childImageSharp.fluid.originalName === props.yourVARIABLE)[0].node.childImageSharp.fluid;
  {/* ... */}
}
export const query = graphql`
// ...

EDIT

В В вашем комментарии вы допустили ошибку , разрушив ваши реквизиты в параметрах вашей функции стрелок. Это ваш исправленный код: 


const BackgroundDiv = (props) => { 
  // destructuring all the props to make it clear
  const postName = props.postName // the variable you want to filter for
  const className = props.className;
  const children = props.children;
  const { data: { allFile: { edges } } } = props; 

  const oneImage = edges.filter(edge =>  
    edge.node.childImageSharp.fluid.originalName === postName)[0].node.childImageSharp.fluid;
0 голосов
/ 28 января 2020

Я прошел через аналогичную проблему. К счастью, я обнаружил, что это работает со строковыми интерполяциями: 

// Option 1
$postName
const query1 = `file(relativePath: {eq: $postName}) { ... }`

// Option 2
${({postName})

const query2 = `file(relativePath: {eq: ${({postName})}) { ... }`

Взгляните на фрагмент кода, который я использовал для одного из моих проектов: https://github.com/timrodz/.com/blob/master/src/components/common/Button/index.js#L33

...