feat: use trpc 11

[juliusmarminge]

Closes #

✅ Checklist

• [ ] I have followed every step in the contributing guide (updated 2022-10-06).
• [ ] The PR title follows the convention we established conventional-commit
• [ ] I performed a functional test on my final commit

---

Changelog

[Short description of what has changed]

---

Screenshots

[Screenshots]

💯

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
t3-upgrade	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2024 8:44pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
create-t3-app	⬜️ Ignored (Inspect)	Visit Preview		Mar 7, 2024 8:44pm

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 09119f9b4b4eeffcb096b3cfb7f6a7971ccd5026

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-t3-app	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	98
🟢 Accessibility	91
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://create-t3-app-git-trpc11-t3-oss.vercel.app/

[juliusmarminge]

pr looks good. how do you feel about merging while trpc v11 is still in beta? from what i understand APIs/interfaces aren't guaranteed to be stable (in terms of semver) yet?

always a fine line to draw... I'm okay merging it cause I can easily make any necessary updates to the template if necessary. Although I guess people initting might not feel the same...

I'm exclusively using v11 right now, and Alex and Nick are using it at work, but I understand we're special cases 🫣

[crivera]

Is there a way to use this without being merged? npm create t3-app@trpc11?

Thank you

[github-actions[bot]]

A new create-t3-app prerelease is available for testing. You can install this latest build in your project with:

pnpm create [email protected]

[CuriouslyCory]

https://github.com/t3-oss/create-t3-app/blob/ec56d53245f2b1579d088568db5154211ffd056f/cli/template/extras/src/utils/api.ts#L29 transformer: superjson needs to be moved to the httpLinkBatch and outside of the config() function. Here's an example of a working config.

/**
 * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
 * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
 *
 * We also create a few inference helpers for input and output types.
 */
import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "~/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Transformer used for data de-serialization from the server.
   *
   * @see https://trpc.io/docs/data-transformers
   */
  transformer: superjson,
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

[alexander-densley]

I used this new create t3 app and am trying to integrate clerk auth, unfortunately it is not working, despite it working on the previous t3 set up. here is the link to the gist where clerk was working: https://gist.github.com/mkcode/a590d1c8f7b0a37b8299965de7f7e958

Any advice on how to implement this properly with the new t3 set up?

[juliusmarminge]

Check this out for a clerk example https://github.com/juliusmarminge/t3-appdir-clerk

[markomitranic]

@juliusmarminge is there a goal for when this will get merged?

Asking simply because not sure if we will be waiting for trpc to exit beta before its merged - in which case I won't wait for it and will adopt this PR manually in my project :)

[nate-vukovich]

Is there a plan or maybe an ETA for this? I've basically copied the changes into my codebase :D

Maybe a waaay of crazy question but maybe a dedicated branch for all the crazy beta unstable stuff? Since Auth.js is also in experimental mode ( and I already went on latest with it ).

Cheers and regards from Austria.

[LZL0]

Is there a plan or maybe an ETA for this? I've basically copied the changes into my codebase :D

Maybe a waaay of crazy question but maybe a dedicated branch for all the crazy beta unstable stuff? Since Auth.js is also in experimental mode ( and I already went on latest with it ).

Cheers and regards from Austria.

Good question. Both TRPC 11 and Next Auth 5 (Auth.js) are coming out over the next several weeks. Meanwhile, Prisma has released a new serverless edge driver for Neon.tech and Planetscale.

• https://www.prisma.io/blog/prisma-orm-support-for-edge-functions-is-now-in-preview
• https://neon.tech/blog/better-postgres-with-prisma-experience

[stunaz]

Not sure why prisma is mentioned here.I am using the latest of everything… auth 5, trpc 11, react-query 5… all is good , been using this PR

[juliusmarminge]

This'll ship as soon as someone gets the opportunity to review it and approve it

[LZL0]

Not sure why prisma is mentioned here.I am using the latest of everything… auth 5, trpc 11, react-query 5… all is good , been using this PR

💯 Just wanted to mention these things.

[juliusmarminge]

Let's do it

[alexander-densley]

question, with this, is there a best practice to enable ssr for prefetching data? I noticed that here we use createTRPCReact instead of createTRPCNext so we cant just enable ssr. Thanks for all the hard work, yall are the best!

[maiconcarraro]

question, with this, is there a best practice to enable ssr for prefetching data? I noticed that here we use createTRPCReact instead of createTRPCNext so we cant just enable ssr. Thanks for all the hard work, yall are the best!

@alexander-densley I could be wrong, but pretty sure createTRPCReact is to enable tanstack/react-query for client side, for the server it's using the createCallerFactory

[juliusmarminge]

No the ”bridge” between RQ and RSC data hasnt been closed in this update. We’re still experimenting with how this could look (for example, see https://github.com/trpc/trpc/pull/5451)