2 replies

useQuery runs on CSR?!

Hi!

When I try to build my next app, the useQuery hooks from my pages are triggered and fail with TRPCError (because you have to be authenticated).

I am using

ssr: false

ssr: false

and my pages don't use

getStaticProps

getStaticProps

getServerSideProps

getServerSideProps

The useQuery should run only on client side as mentioned in https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering

Any idea how to debug/fix this?

const Page: NextPage = () => {
const {data} = api.test.list.useQuery()

return (<>
   {data?.map(item => <p ...>{item.title}</>)
</>)

}

const Page: NextPage = () => {
const {data} = api.test.list.useQuery()

return (<>
   {data?.map(item => <p ...>{item.title}</>)
</>)

}

Rendering: Client-side Rendering (CSR)

Learn how to implement client-side rendering in the Pages Router.

TTC

Theo's Typesafe Cult•3y ago•

2 replies

xegld

useQuery runs on CSR?!

Hi!

When I try to build my next app, the useQuery hooks from my pages are triggered and fail with TRPCError (because you have to be authenticated).

I am using

ssr: false

ssr: false

and my pages don't use

getStaticProps

getStaticProps

getServerSideProps

getServerSideProps

The useQuery should run only on client side as mentioned in https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering

Any idea how to debug/fix this?

const Page: NextPage = () => {
const {data} = api.test.list.useQuery()

return (<>
   {data?.map(item => <p ...>{item.title}</>)
</>)

}

const Page: NextPage = () => {
const {data} = api.test.list.useQuery()

return (<>
   {data?.map(item => <p ...>{item.title}</>)
</>)

}

Rendering: Client-side Rendering (CSR)

Learn how to implement client-side rendering in the Pages Router.

useQuery runs on CSR?!

Similar Threads

useQuery runs on CSR?!

Similar Threads

Similar Threads

Similar Threads