import Layout from '../components/layout' import { ItemsSkeleton } from '../components/items' import { getGetServerSideProps } from '../api/ssrApollo' import { OUTLAWED_ITEMS } from '../fragments/items' import { useQuery } from '@apollo/client' import MixedItems from '../components/items-mixed' export const getServerSideProps = getGetServerSideProps(OUTLAWED_ITEMS) export default function Index ({ data: { outlawedItems: { items, cursor } } }) { return ( <Layout> <Items items={items} cursor={cursor} /> </Layout> ) } function Items ({ rank, items, cursor }) { const { data, fetchMore } = useQuery(OUTLAWED_ITEMS) if (!data && !items) { return <ItemsSkeleton rank={rank} /> } if (data) { ({ outlawedItems: { items, cursor } } = data) } return <MixedItems items={items} cursor={cursor} rank={rank} fetchMore={fetchMore} /> }