37 lines
792 B
JavaScript
37 lines
792 B
JavaScript
|
import { gql, useQuery } from '@apollo/client'
|
||
|
|
import React from 'react'
|
||
|
|
import Item from './item'
|
||
|
|
import styles from './items.module.css'
|
||
|
|
|
||
|
|
export default function Items () {
|
||
|
|
const { loading, error, data } = useQuery(
|
||
|
|
gql`
|
||
|
|
{ items {
|
||
|
|
id
|
||
|
|
createdAt
|
||
|
|
title
|
||
|
|
url
|
||
|
|
user {
|
||
|
|
name
|
||
|
|
}
|
||
|
|
sats
|
||
|
|
ncomments
|
||
|
|
} }`
|
||
|
|
)
|
||
|
|
if (error) return <div>Failed to load</div>
|
||
|
|
if (loading) return <div>Loading...</div>
|
||
|
|
const { items } = data
|
||
|
|
return (
|
||
|
|
<div className={styles.grid}>
|
||
|
|
{items.map((item, i) => (
|
||
|
|
<React.Fragment key={item.id}>
|
||
|
|
<div className={styles.rank} key={item.id}>
|
||
|
|
{i + 1}
|
||
|
|
</div>
|
||
|
|
<Item item={item} />
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|