pages.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import { useStaticQuery, graphql } from "gatsby"

const IndexPage = () => {
  const MovieResult = useStaticQuery(
  graphql`
    query MyQuery {
      Movie {
        movies {
          title
          rate
        }
      }
    }      
    `
  )

const movies = MovieResult.Movie.movies;
return(
  <Layout>
    <SEO title="Home" />
    <ul>
    {movies.map((movie) => (
      <li>
        <p>{movie.title}({movie.rate})</p>
      </li>
    ))}
    </ul>
  </Layout>
)}

export default IndexPage