[RFC] SSR Magic - getDataFromTree()

[KATT]

Idea

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.

Dummy code

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;

References

• https://www.apollographql.com/docs/react/performance/server-side-rendering/
• https://github.com/apollographql/apollo-client/blob/main/src/react/ssr/getDataFromTree.ts
• https://github.com/apollographql/apollo-client/blob/main/src/react/ssr/RenderPromises.ts

Next steps after

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.

[KATT]

Solved by #306