question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@trpc/next withTRPC "eats" pageProps

See original GitHub issue

@trpc/next: 7.2.1

Wrapping _app in withTRPC removes pageProps

Example: pageProps is undefined:

import {withTRPC} from "@trpc/next"
import {Provider} from "next-auth/client"
import {AppProps} from "next/app"
import "../style/app.css"

function App({Component, pageProps}: AppProps) {
  console.log({pageProps}) // {pageProps: undefined}
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default withTRPC(
  (_ctx) => ({
    url: "http://localhost:3000/api/trpc",
    queryClientConfig: {
      defaultOptions: {
        queries: {
          staleTime: 600
        }
      }
    }
  }),
  {ssr: true}
)(App)

Example: pageProps is not undefined:

import {Provider} from "next-auth/client"
import {AppProps} from "next/app"
import "../style/app.css"

export default function App({Component, pageProps}: AppProps) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
KATTcommented, Jun 21, 2021

@akomm i think i’ve just resolved this in the latest v8 alpha

0reactions
github-actions[bot]commented, Oct 5, 2022

This issue has been locked because it had no new activity for 14 days. If you are running into a similar issue, please create a new issue. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Usage with Next.js - tRPC
withTRPC () options​. config -callback​. The config -argument is a function that returns an object that configures the tRPC and React Query ...
Read more >
trpc/next with ssr: true breaks getServerSideProps #596 - GitHub
In my case I was experimenting with Trpc but I rolled back because of this issue. getServerSideProps slows down route changes, but ...
Read more >
@trpc/next - npm
Start using @trpc/next in your project by running `npm i @trpc/next`. There are 12 other projects in the npm registry using @trpc/next.
Read more >
Next.js Authentication with NextAuth, tRPC and Prisma ORM
Many applications need to know in some way who the user is and whether or not he has permission to access a specific...
Read more >
Build a Blog With the T3 Stack - tRPC, TypeScript ... - YouTube
Repository: https://github.com/TomDoesTech/trpc-tutorialtRPC docs: https://trpc.io/In this video, we will build a blog with the T3 stack, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found