How to prefetch queries with tRPC?

The generateSSGHelpers function is deprecated as of now, what is the new way to prefetch queries with trpc?
2 Replies
hyhy
hyhy16mo ago
Hi @adityaj21 , here's how I did it on my website
import { createProxySSGHelpers } from '@trpc/react-query/ssg'
import type { GetServerSidePropsContext } from 'next'
import { type NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import superjson from 'superjson'
import { appRouter } from '../../server/api/root'
import { createInnerTRPCContext } from '../../server/api/trpc'
import { getServerAuthSession } from '../../server/auth'
import { api } from '../../utils/api'
import { formatVideoEmbedUrl, getThumbnailUrl } from '../../utils/video'

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const session = await getServerAuthSession(ctx)

const ssg = createProxySSGHelpers({
router: appRouter,
ctx: createInnerTRPCContext({ session }),
transformer: superjson,
})

if (typeof ctx.query.playId === 'string') {
await ssg.play.getById.fetch(ctx.query.playId)
}

return {
props: {
trpcState: ssg.dehydrate(),
},
}
}

const Home: NextPage = () => {
const { query } = useRouter()
if (typeof query.playId !== 'string') return <p>Bad ID</p>

const { data: play, isLoading: isLoadingPlay } = api.play.getById.useQuery(query.playId, {
refetchOnWindowFocus: false,
})

return (
<>
<Head>
{play && (
<>
<meta property='og:title' content={play.name} />
<meta property='og:description' content={play.description} />
</>
)}
</Head>
</>
)
}

export default Home
import { createProxySSGHelpers } from '@trpc/react-query/ssg'
import type { GetServerSidePropsContext } from 'next'
import { type NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import superjson from 'superjson'
import { appRouter } from '../../server/api/root'
import { createInnerTRPCContext } from '../../server/api/trpc'
import { getServerAuthSession } from '../../server/auth'
import { api } from '../../utils/api'
import { formatVideoEmbedUrl, getThumbnailUrl } from '../../utils/video'

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const session = await getServerAuthSession(ctx)

const ssg = createProxySSGHelpers({
router: appRouter,
ctx: createInnerTRPCContext({ session }),
transformer: superjson,
})

if (typeof ctx.query.playId === 'string') {
await ssg.play.getById.fetch(ctx.query.playId)
}

return {
props: {
trpcState: ssg.dehydrate(),
},
}
}

const Home: NextPage = () => {
const { query } = useRouter()
if (typeof query.playId !== 'string') return <p>Bad ID</p>

const { data: play, isLoading: isLoadingPlay } = api.play.getById.useQuery(query.playId, {
refetchOnWindowFocus: false,
})

return (
<>
<Head>
{play && (
<>
<meta property='og:title' content={play.name} />
<meta property='og:description' content={play.description} />
</>
)}
</Head>
</>
)
}

export default Home
You will likely need to export createInnerTRPCContext from within your app I use it here to set the meta tags for my play page, otherwise you'd be unable to get that data when linking in discord posts etc
aditya
aditya16mo ago
hi @hyhy i tried your code but the problem is that the ssg helpers are deprecated now idk why using @trpc/react-query 10.26.0
Want results from more Discord servers?
Add your server