Proper suspense usage of @trpc/react-query inside a @tanstack/react-router route?

[mgcrea]

I'm wondering what is the proper way forward to migrate the following code, taken from the react-query example from tanstack router docs), from @tanstack/react-query to @trpc/react-query?

import * as React from 'react'
import {
  createFileRoute,
  Link,
  MatchRoute,
  Outlet,
} from '@tanstack/react-router'
import { Spinner } from '../components/Spinner'
import { invoicesQueryOptions } from '../utils/queryOptions'
import { useSuspenseQuery } from '@tanstack/react-query'

export const Route = createFileRoute('/dashboard/invoices')({
  loader: (opts) =>
    opts.context.queryClient.ensureQueryData(invoicesQueryOptions()),
  component: InvoicesComponent,
})

function InvoicesComponent() {
  const invoicesQuery = useSuspenseQuery(invoicesQueryOptions())
  const invoices = invoicesQuery.data

  return (
    <div className="flex-1 flex">
      <div className="divide-y w-48">
        {invoices?.map((invoice) => {
          return (
            <div key={invoice.id}>
              <Link
                to="/dashboard/invoices/$invoiceId"
                params={{
                  invoiceId: invoice.id,
                }}
                preload="intent"
                className="block py-2 px-3 text-blue-700"
                activeProps={{ className: `font-bold` }}
              >
                <pre className="text-sm">
                  #{invoice.id} - {invoice.title.slice(0, 10)}{' '}
                  <MatchRoute
                    to="/dashboard/invoices/$invoiceId"
                    params={{
                      invoiceId: invoice.id,
                    }}
                    pending
                  >
                    {(match) => <Spinner show={!!match} wait="delay-50" />}
                  </MatchRoute>
                </pre>
              </Link>
            </div>
          )
        })}
      </div>
      <div className="flex-1 border-l border-gray-200">
        <Outlet />
      </div>
    </div>
  )
}

We can call the trpc useSuspenseQuery() helper (eg. trpc.user.fetchInvoices.useSuspenseQuery()) in our component but what about the loader call queryClient.ensureQueryData?

I've seen that you can extract the key with getQueryKey but not sure how to extract the function queryFn, and I'm not even sure what are the precise impacts of this (if any?), any guidance?

Thanks!

[mgcrea]

I think I found what I wanted:

trpcQueryUtils.user.fetchInvoices.ensureData