rsnext/examples/with-realm-web/pages/index.js

import useSWR from 'swr'
import { generateAuthHeader, REALM_GRAPHQL_ENDPOINT } from '../lib/RealmClient'

const FIND_MOVIES = `
  query FindMovies{
    movies(query: { year: 2014, rated: "PG" } ) {
      title
      year
      runtime
    }
  }
`

const fetcher = async (query) =>
  fetch(REALM_GRAPHQL_ENDPOINT, {
    method: 'POST',
    headers: await generateAuthHeader(),
    body: JSON.stringify({ query }),
  }).then((res) => res.json())

const IndexPage = () => {
  const { data } = useSWR(FIND_MOVIES, fetcher)

  if (data && data.error) {
    console.error(data.error)
    return <p>An error occurred: ${data.error}</p>
  }
  const movies = data ? data.data.movies : null

  return (
    <>
      <div className="App">
        <h1>"PG" Rated Movies - 2014</h1>

        {data ? (
          !movies && <div className="status">No movies Found</div>
        ) : (
          <div className="status"> Fetching data...</div>
        )}

        {movies && (
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Title</th>
                <th>Runtime</th>
              </tr>
            </thead>
            <tbody>
              {movies.map((movie, index) => {
                return (
                  <tr key={index}>
                    <td>{index + 1}</td>
                    <td>{movie.title}</td>
                    <td>{movie.runtime}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        )}
      </div>

      <style jsx>{`
        th,
        td {
          padding: 15px;
          text-align: left;
        }
        tr:nth-child(even) {
          background-color: #f2f2f2;
        }
        th {
          background-color: #69bef0;
          color: white;
        }
        table {
          width: 100%;
        }
        h1 {
          text-align: center;
          font-family: sans-serif;
        }
        .status {
          text-color: red;
          text-align: center;
        }
      `}</style>
    </>
  )
}

export default IndexPage