index.js

import React , { useEffect , useState } from "react"
import { Link , graphql , useStaticQuery ,navigate } from "gatsby"
import Layout from "../components/layout"
import Button from '@material-ui/core/Button'; 
import slugify from "../utils/slugify"
import withFirebase  from "../lib/withFirebase"

const IndexPage = (props) => {
   const [email,setEmail] = useState(null);
   const data = useStaticQuery(graphql`
      query getPost {
         swapi {
            posts {
               post_tags {
                  id
                  tag {
                     id
                     name
                  }
               }
               title
               description
               created_at
               id
            }
         }
      }
   `)
   return (
      <Layout>
      {props.user && props.user.email}
      <Button variant="contained" color="primary" 
         onClick={() => props.firebase && props.firebase.auth.signInWithPopup(props.firebase.googleAuthProvider)}>
            Hello World
         </Button>
       {
          data.swapi.posts.map(post => <div key={post.id}>
            <Link to={`/post/${post.id}`}>
             <h1>{post.title}</h1>
            </Link>
             <h1>{post.description}</h1>
             <div>
                {
                   post.post_tags.map(tag => (
                      <Link to={`/tags/${slugify(tag.tag.name)}`}>
                      <span>
                         <b>{tag.tag.name}</b>&nbsp;
                      </span>
                      </Link>
                   ))
                }
             </div>
          </div>)
       }
      </Layout>
    )
}

export default withFirebase(IndexPage)