import Item, { ItemSkeleton } from '../../components/item' import Layout from '../../components/layout' import Reply, { ReplySkeleton } from '../../components/reply' import Comment from '../../components/comment' import Text from '../../components/text' import Comments, { CommentsSkeleton } from '../../components/comments' import { COMMENTS } from '../../fragments/comments' import { ITEM_FIELDS } from '../../fragments/items' import { gql, useQuery } from '@apollo/client' import styles from '../../styles/item.module.css' import Seo from '../../components/seo' import ApolloClient from '../../api/client' // ssr the item without comments so that we can populate metatags export async function getServerSideProps ({ req, params: { id } }) { const { error, data: { item } } = await (await ApolloClient(req)).query({ query: gql` ${ITEM_FIELDS} { item(id: ${id}) { ...ItemFields text } }` }) if (!item || error) { return { notFound: true } } return { props: { item } } } export default function FullItem ({ item }) { const query = gql` ${ITEM_FIELDS} ${COMMENTS} { item(id: ${item.id}) { ...ItemFields text comments { ...CommentsRecursive } } }` return ( ) } function LoadItem ({ query }) { const { loading, error, data } = useQuery(query) if (error) return
Failed to load!
if (loading) { return (
) } const { item } = data return ( <> {item.parentId ? : ( <> {item.text &&
{item.text}
}
)}
) }