Similar to Apollo's way of prefetching.
Should be possible to prefetch all data on the server automatically without using any getStaticProp/etc. Could be done in _app.tsx
Since the queries have the paths and the input one could just invoke the router server side when calling to useQuery() and write it to the react-query cache.
import { createTRPCClient } from '@trpc/client';
import type { AppContext, AppProps /*, AppContext */ } from 'next/app';
import { QueryClientProvider } from 'react-query';
import { Hydrate } from 'react-query/hydration';
import { trpc } from '../utils/trpc';
import type { AppRouter } from './api/trpc/[trpc]';
import { getDataFromTree, ssrLink } from '@trpc/react/ssr';
import App from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<QueryClientProvider client={trpc.queryClient}>
<Hydrate state={trpc.useDehydratedState(pageProps.dehydratedState)}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
);
}
if (!process.browser) {
MyApp.getInitialProps = async (appContext: AppContext) => {
// calls page's `getInitialProps` and fills `appProps.pageProps`
const appProps = await App.getInitialProps(appContext);
await getDataFromTree(trpc)
return {
...appProps,
dehydratedState: // ... todo,
}
};
}
export default MyApp;
And as a step two we could do something really cool, which is to provide a wrapper around <Link>
(Blink
?) and optimistically preload queries from other routes on e.g. mouse over.
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too