Describe the feature you'd like to request

We should make official support for Next 13 app layouts & RSC.

Describe the solution you'd like to see

Being able to transparently use tRPC identically in RSC-components and in "use client"-components.

This is very open-ended and hard to answer without tonnes of exploration.

We've done some in https://github.com/trpc/next-13 and experiments of new Next.js adapters in https://github.com/trpc/examples-next-app-dir

Rough outline / sketches

Leverage "forked" versions of the tRPC client outlined by @sebmarkbage in this tweet.

Folder structure

.
├── pages
│   └── api
│       └── [trpc].ts
└── trpc
    ├── index.ts # entrypoint for TS to be happy. Actually not used, `package.json` will magically route to `/entrypoints`
    ├── package.json 
    ├── context.ts
    ├── entrypoints
    │   ├── client.ts # <-- this is what gets magically imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/trpc` on the client
    │   └── rsc.ts # <-- gets imported when importing `~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/trpc` in RSC
    └── routers
        ├── _app.ts
        └── example.ts

With this structure we should be able to streamline the API to be exactly the same within RSC & in "use client" components.

Usage

Again, it should not matter if the below is done within a RSC-component or in a "use client" one.

import { use } from 'react';
import { trpc } from '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/trpc';

function MyComponent() {
  const post = use(trpc.post.byId.query({ id: "1" }))

  // [..]
}

createContext()

In the createContext function we'll need to be able to distinguish what type of call it is.

Next 13 have some new magical headers() and cookies - we should probably call these or allow for a way of calling them within RSC.

function createContext(opts: CreateTRPCContextNextAppLayout /* maybe CreateTRPCContextNextAppLayoutEdgeApi too */ ) {
  if (opts.type === "rsc") {
    opts.headers
  } else {
     opts.req.headers
  }
}

Additional information

• https://github.com/trpc/next-13
• trpc/next-13#3
• https://github.com/TanStack/query/discussions/4623

Open questions

• How do we hydrate a fetch call made in "use client" that is fetched through SSR & when it's mounted on the client? React Query doesn't seem to support this yet (& I'm guessing it's because lack of support from React)
• Do we still use React Query? I think it makes sense, but we could mimick most of the React Query features through links
• Do we make some CLI util to make the setup easy? There's a few new files now.
• Do we make an ssrLink to avoid calls over the network?

Update - Prior art:

• https://github.com/apollographql/apollo-client-nextjs/blob/pr/RFC-2/RFC.md#option-wrap-the-suspense-component
• https://github.com/urql-graphql/urql/pull/3214/files#diff-4c8e87f793276461172bb43d8d130f0d5d6eb80cd70fe24f53cf1a8d70ea89ab

_{From SyncLinear.com | T-74}