Gatsby's StaticQuery renders nothing-CodePudding

I'm able to log the data in the console but StaticQuery renders absolutely nothing (not even the "Hello").

import React from "react";
import { graphql, StaticQuery } from "gatsby";

export default function Header() {
  return (
      <StaticQuery
        query={
          graphql`
          {
            allStrapiPage {
              nodes {
                id
                publishedAt
                slug: Slug
                title: Titulo
                body: Corpo {
                  Titulo
                  Texto {
                    data {
                      text: Texto
                    }
                  }
                }
              }
            }
          }
        `
        }
        render={data => {
          <header>
            <h1>Hello</h1>
            <h1>{console.log(data)}</h1>
          </header>
        }}
      />
  )
}

Here's my index.jsx:

import * as React from "react"
import Header from "../components/Header"

const IndexPage = () => {
  return (
    <main>
      <Header />
    </main>
  )
}

export default IndexPage

I've already tried removing the node_modules and installing it again with different package managers.

CodePudding user response：

You need to return the statement inside:

render={data => {
  return <header>
    <h1>Hello</h1>
    <h1>{console.log(data)}</h1>
  </header>
}}

Or using the implicit return:

render={data => (
  <header>
    <h1>Hello</h1>
    <h1>{console.log(data)}</h1>
  </header>
)}