templates/Post.tsx

import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import styled from 'styled-components'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import {
  Wrapper,
  Header,
  SEO,
  PrevNext,
  SectionTitle,
  SectionSubTitle,
  Narrow,
  Wide
} from 'components'
import { Layout } from 'layouts'
import { Content } from 'layouts/components'
import config from 'config/siteConfig'
import 'utils/prismjs-theme.css'
import Post from 'models/Post'
import { MDXProvider } from '@mdx-js/react'
import { ReactResponsiveEmbed } from 'components/ReactResponsiveEmbed'
import {
  YouTube,
  Video,
  SpeakerDeck,
  SoundCloud,
  Spotify,
  Toot,
  Tweet
} from 'components/Embeds'
import { theme } from 'config/theme'
import PageContext from 'models/PageContext'
import sendEmail  from 'layouts/components/sendEmail'

const ShortCodes = {
  Narrow,
  Wide,
  ReactResponsiveEmbed,
  YouTube,
  Video,
  SpeakerDeck,
  Tweet,
  SoundCloud,
  Spotify,
  Toot
}

const PostContent = styled.div`
  margin-top: 1rem;
`

const TypoLink = styled.a`
  color: ${theme.colors.grey.default};
  margin: 0.5rem auto;
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  &:hover {
    color: ${theme.colors.primary};
    text-decoration: underline;
  }
`

interface Props {
  data: {
    mdx: Post
  }
  pageContext: PageContext
}

const PostPage = (props: Props) => {
  const { prev, next } = props.pageContext
  const post = props.data.mdx
  return (
    <Layout>
      {post ? (
        <>
          <SEO path={post.fields.path} data={post} />
          <Helmet title={`${post.frontmatter.title} | ${config.siteTitle}`} />
          <Header
            banner={
              post.frontmatter.banner && post.frontmatter.banner.publicURL
            }
            bannerAttribution={post.frontmatter.bannerAttribution}
            left
          >
            <SectionTitle left>
              {post.frontmatter.title}
              <Line />
              <SectionSubTitle left>
                <Date dateTime={post.frontmatter.standardDate}>
                  {post.frontmatter.date}
                </Date>
              </SectionSubTitle>
            </SectionTitle>
          </Header>
          <Wrapper>
            <Content>
              <PostContent>
                <MDXProvider components={ShortCodes}>
                  <MDXRenderer>{post.body}</MDXRenderer>
                </MDXProvider>
              </PostContent>
              <hr style={{ margin: '0' }} />
              <TypoLink onClick={sendEmail}>
                Please submit corrections on email by pressing here. Or
              </TypoLink>
              <TypoLink>
                Email me at [email protected] using Subject: Blog(Suggestion/Corrections)
              </TypoLink>
              <PrevNext prev={prev} next={next} />
            </Content>
          </Wrapper>
        </>
      ) : null}
    </Layout>
  )
}
// Gatsby needs this default export to work.
// eslint-disable-next-line import/no-default-export
export default PostPage

const Line = styled.hr`
  color: white;
  width: 5rem;
  margin: 0.5rem 0;
  height: 3px;
`

const Date = styled.time`
  color: white;
  clear: both;
  font-family: ${config.headerFontFamily};
`

export const postQuery = graphql`
  query ($id: String!) {
    mdx(id: { eq: $id }) {
      id
      body
      fields {
        path
        githubLink
      }
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
        standardDate: date(formatString: "YYYY-MM-DD")
        banner {
          publicURL
        }
        bannerAttribution
      }
      excerpt(pruneLength: 320)
      timeToRead
    }
  }
`

publications.mdx

---
title: Publications
banner: /assets/bg/publications.jpg
bannerAttribution: 
socialImage: 
---
Some text

I have an image at assets/bg/publications.jpg.

If I remove the banner tag here. It compiles fine.
The components/Header.tsx code:

import React from 'react'
import styled from 'styled-components'
import rgba from 'polished/lib/color/rgba'
import { media } from 'utils/media'
import config from 'config/siteConfig'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faImage } from '@fortawesome/free-solid-svg-icons'

const HeaderWrapper: any = styled.header<{
  banner: string
  left?: boolean
}>`
  display: block;
  clear: both;
  position: relative;
  /* Abusing linear-gradient for a constant dim effect. */
  background: linear-gradient(
      ${() => rgba(0, 0, 0, 0.2)},
      ${() => rgba(0, 0, 0, 0.2)}
    ),
    url(${({ banner }) => banner}) no-repeat black;
  background-size: cover;
  text-align: ${({ left }) => (left ? 'left' : 'center')};
  z-index: 5;

  padding-top: 4rem;
  padding-bottom: 4rem;
  @media ${media.tablet} {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  @media ${media.phone} {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
`

const ContentWrapper = styled.div<{ left?: boolean }>`
  margin: 0 auto;
  width: 66.6%;

  @media ${media.tablet} {
    width: 83.3%;
  }
  @media ${media.phone} {
    width: initial;
  }
`

const Content = styled.div<{ left?: boolean }>`
  position: relative;
  a {
    color: white;
    &:hover {
      opacity: 0.85;
      color: white;
    }
  }

  margin: 3rem 4rem;
  @media ${media.tablet} {
    margin: 2rem 2rem;
  }
  @media ${media.phone} {
    margin: 0rem 1rem;
  }
`

const AttributionLink = styled.a`
  text-decoration: none;
  position: absolute;
  bottom: 0;
  right: env(safe-area-inset-right);
  color: rgba(255, 255, 255, 0.5);
  padding-right: 1.25em;
  padding-bottom: 1.25em;
`

interface Props {
  children: any
  banner?: string
  bannerAttribution?: string
  left?: boolean
}

export const Header = ({
  banner,
  bannerAttribution,
  left,
  children
}: Props) => {
  return (
    <HeaderWrapper banner={banner || config.defaultBg} left={left}>
      {bannerAttribution && (
        <AttributionLink href={bannerAttribution}>
          <FontAwesomeIcon icon={faImage} />
        </AttributionLink>
      )}
      <ContentWrapper left={left}>
        <Content left={left}>{children}</Content>
      </ContentWrapper>
    </HeaderWrapper>
  )
}

The error is the following:

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "banner" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "banner". If you didn't expect "banner" to be of type "String" make sure
 that your input source and/or plugin is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use
the GraphiQL explorer to see which fields you can query and what shape they have.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the
mentioned
      "dummy content". Visit our docs to learn how you can define the schema for "undefined":
      https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/templates/Post.tsx:150:16

failed extract queries from components - 0.829s

I’m a bit confused about the error. I don’t wanna remove the banner tag. Rather I want the banner to appear behind publications page on the website.