How to get WordPress Wesitelogo

Question

I am a newbie with Gatsby. So, I would like to get my website logo defined in the WordPress administration. Here is how I did it:

`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;

`

unfortunately it doesn't work and I get the following error: TypeError:

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

So I turn to you so that I can succeed in doing it

Thank you !

Answer 1

You need to enter the position of the nested edges, since it's an array.

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

However, this won't work to display the image using gatsby-image. You should use a native img tag:

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

If you want to use gatsby-image, you need to retrieve some additional data using fragments or raw fields. An ideal query of gatsby-image should look like:

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

Then, you will be able to:

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

To summarize, you can't just use src attribute because Gatsby needs to parse the image using transformers and sharps to treat the image and create GraphQL node schemas.

You need to transform your query to something like:

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

For further details take a look at this article.