import Link from 'next/link' ; import { trpc } from '../utils/trpc' ; import { NextPageWithLayout } from './_app' ; const IndexPage = ( ) => { const utils = trpc . useContext ( ) ; const postsQuery = trpc . useQuery ( [ 'post.all' ] ) ; const addPost = trpc . useMutation ( 'post.add' , { async onSuccess ( ) { await utils . invalidateQueries ( [ 'post.all' ] ) ; } , } ) ; return ( < > < 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 ) ; $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> < />); } ; export default IndexPage ; link