Как получить WordPress Wesitelogo

#javascript #graphql #gatsby #gatsby-image #gatsby-plugin

#javascript #graphql #гэтсби #gatsby-изображение #gatsby-плагин

Вопрос:

Я новичок в Gatsby. Итак, я хотел бы, чтобы логотип моего сайта был определен в администрации WordPress. Вот как я это сделал:

 `import React from 'react';
import {graphql, StaticQuery} from 'gatsby';
import styled from 'styled-components';
import  Img  from  'gatsby-image';

    const SiteInfo = () => (
        <StaticQuery query={graphql`
        {
            file(name: {eq: "logo"}) {
                relativePath
                childImageSharp {
                  fluid {
                    originalImg
                  }
                }
            }
            site {
                siteMetadata {
                  title
                }
            }
        
        allFile(filter: {name: {eq: "logo"}}) {
            edges {
              node {
                name
                url
                relativePath
              }
            }
        }
        
        allWordpressWpMedia(filter: {title: {eq: "logo"}}) {
            edges {
              node {
                title
                source_url
              }
            }
          }
    }
      
      
    `
    } render = {data => (
        <BasicInfoWrapper>
            <Sitelogo>
                <Img src={data.allWordpressWpMedia.edges.node.source_url} alt="Logo" />
            </Sitelogo>
            <SiteTitle>
                {/*data.site.siteMetadata?.title || `Title`*/}
            </SiteTitle>

        </BasicInfoWrapper>
    )}/>
    );
    export default SiteInfo;

к сожалению, это не работает, и я получаю следующую ошибку: TypeError:

 `can't access property "source_url", data.allWordpressWpMedia.edges.node is undefined`

Итак, я обращаюсь к вам, чтобы я мог добиться успеха в этом

Спасибо!

1. Вы тестировали свой запрос в GraphQL playground ( localhost:8000/___graphql )?

2. Да, это работает очень хорошо. Вот результаты: { «data»: { «allWordpressWpMedia»: { «edge»: [ { «node»: { «title»: «logo», «source_url»: » localhost/hellopomelo/wp-content/uploads/2020/11/ логотип.png » } } ] } }, «расширения»: {} }

Ответ №1:

Вам нужно ввести позицию вложенного edges , поскольку это массив.

  <Img src={data.allWordpressWpMedia.edges[0].node.source_url} alt="Logo" />

Однако это не сработает для отображения изображения с помощью gatsby-image . Вы должны использовать собственный img тег:

  <img src={data.allWordpressWpMedia.edges[0].node.source_url} alt="Logo" />

Если вы хотите использовать gatsby-image , вам нужно получить некоторые дополнительные данные, используя фрагменты или необработанные поля. Идеальный запрос gatsby-image должен выглядеть так:

   query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }

Затем вы сможете:

 export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

Подводя итог, вы не можете просто использовать src attribute, потому что Gatsby необходимо проанализировать изображение с помощью transformers и sharps для обработки изображения и создания схем узлов GraphQL.

Вам нужно преобразовать ваш запрос во что-то вроде:

 const allMedia = graphql`
  query {
    allWordpressWpMedia {
      edges {
        node {
          source_url
          localFile {
            publicURL
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

Для получения дополнительной информации взгляните на эту статью.