How to use the gatsby.useStaticQuery function in gatsby

const Map = ({ setCurrentCity }) => {

  const data = useStaticQuery(citiesQuery)
  const cities = data.allCitiesJson.edges

  useEffect(() => { new Rellax('.rellax') }, [])

  const handleDotClick = city => {
    window.scrollTo({ top: 850, behavior: 'smooth' })
    setCurrentCity({ label: city.name, value: city.slug })
  }

  return (
    
      <title data-rellax-speed="-5">
        Find incredible, local groups for women in tech
      </title>

const Bio = () => {
  const data = useStaticQuery(bioQuery)
  const {
    site: {
      siteMetadata: { author },
    },
    avatar,
  } = data

  return (
    
      {avatar ? (

function About() {
  const {
    markdownRemark: { frontmatter }
  } = useStaticQuery(aboutQuery)

  return (
    <main>
      
        <h2>{frontmatter.whatisSDTHTitle}</h2>
        
          {frontmatter.whatisSDTHDescription}
        
      

      
        <h2>{frontmatter.mainTitle}</h2>

        <p>
          </p></main>

export const PageLayout = ({ page, children }) => {
  const data = useStaticQuery(graphql`
    query PageLayoutQuery {
      nav: settingsJson(
        fileRelativePath: { eq: "/content/settings/menu.json" }
      ) {
        ...nav

        rawJson
        fileRelativePath
      }
      theme: settingsJson(
        fileRelativePath: { eq: "/content/settings/theme.json" }
      ) {
        ...globalTheme

        rawJson
        fileRelativePath

const Header = (props) => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "launch-logo.png" }) {
        childImageSharp {
          # Specify the image processing specifications right in the query.
          # Makes it trivial to update as your page's design changes.
          fixed(width: 60, height: 60) {
            src,
            width,
            height
          }
        }
      }
    }
  `)
  return (
  <div></div>

function SEO({ description, lang, meta, title, image }) {
    const { site } = useStaticQuery(
        graphql`
            query {
                site {
                    siteMetadata {
                        title
                        description
                        author
                        logo
                    }
                }
            }
        `
    );

    const metaDescription = description || site.siteMetadata.description;
    const ogImage = image || site.siteMetadata.logo;

export default function PageLayout(props) {
  const data = useStaticQuery(
    graphql`
      {
        site {
          siteMetadata {
            title
            siteName
            subtitle
          }
        }
      }
    `
  );

  const {
    sidebarRef,
    openSidebar,

function SEO({
  description,
  lang,
  meta,
  title,
  image,
  isBlogPost,
  slug,
  dateModified,
  datePublished
}) {
  const { site, posts, stories, videos, services } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author {
              name
            }
            image
            siteUrl
            social {
              twitter
            }
          }
        }

export const Header: FunctionComponent = () => {
  const [topNavOpen, setTopNavOpen] = useState(false);
  const data = useStaticQuery(graphql`
    query getHeaderData {
      site {
        siteMetadata {
          siteUrl
          topnav {
            name
            link
          }
          tools {
            github
            slack
            twitter
          }
        }
      }
    }