import { usePostContext , usePostMutation , usePostQuery } from 'hooks/post' ; import Head from 'next/head' ; import Link from 'next/link' ; import { ReactQueryDevtools } from 'react-query/devtools' ; export default function IndexPage ( ) { const postsQuery = usePostQuery ( [ 'post.all' ] ) ; const addPost = usePostMutation ( 'post.add' ) ; const utils = usePostContext ( ) ; return ( < > < Head > < title > Prisma Starter < /title> < link rel = "icon" href = "/favicon.ico" / > < /Head> < h1 > Welcome to your tRPC starter ! < /h1> < p > Check < a href = "https://trpc.io/docs" > the docs < /a> whenever you get stuck , or ping < a href = "https://twitter.com/alexdotjs" > @ alexdotjs < /a> on Twitter . < /p> < h2 > Posts { postsQuery . status === 'loading' && '(loading)' } < /h2> { postsQuery . data ?. map ( ( item ) => ( < article key = { item . id } > < h3 > { item . title } < /h3> < Link href = { `/post/${ item . id }` } > < a > View more < /a> < /Link> < /article>))} < hr / > < form onSubmit = { async ( e ) => { e . preventDefault ( ) ; link const $text = ( e as any ) . target . elements . text ; const $title = ( e as any ) . target . elements . title ; const input = { title : $title . value , text : $text . value , } ; try { await addPost . mutateAsync ( input ) ; utils . invalidateQueries ( 'post.all' ) ; $title . value = '' ; $text . value = '' ; } catch { } } } > < label htmlFor = "title" > Title : < /label> < br / > < input id = "title" name = "title" type = "text" disabled = { addPost . isLoading } / > < br /> < label htmlFor = "text" > Text : < /label> < br / > < textarea id = "text" name = "text" disabled = { addPost . isLoading } / > < br /> < input type = "submit" disabled = { addPost . isLoading } / > { addPost . error && ( < p style = { { color : 'red' } } > { addPost . error . message } < /p>)} < /form> { process . env . NODE_ENV !== 'production' && ( < ReactQueryDevtools initialIsOpen = { false } />)} < />); } link