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•2y 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

adityaOP•2y 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

Gaming

Programming

How to prefetch queries with tRPC?