Could this work with Next.js?

[cfortuner]

Using the t3 stack and this could be a real help.

But i'm not sure if this could work with TRPC + Next.js

here we define the trpc client

import { createTRPCNext } from "@trpc/next";
export const trpc = createTRPCNext<AppRouter>({
 config() {
 ...
 })

Just wondering if you think these two could work together?

[dai-shi]

Thanks for asking. jotai-trpc is a simple wrapper around trpc vanilla client. It's not even related with React. I hope it technically works with next.js, but never tried. There might be something unexpected. Please give it a try and share what you find.

[bontaramsonta]

I am also confused as we are already using createTRPCNext which is needed for next.js then how to interop with createTRPCJotai

[dai-shi]

I think, usage-wise, createTRPCNext and createTRPCJotai are conflicting. Just like createTRPCReact and createTRPCNext conflict.

[alexgorbatchev]

It works if you don't fetch data on the server, otherwise I couldn't get it to work.

[drMonro]

Thanks for asking. jotai-trpc is a simple wrapper around trpc vanilla client. It's not even related with React. I hope it technically works with next.js, but never tried. There might be something unexpected. Please give it a try and share what you find.

It's work fine, use it in Next 13.4.4

[khari998]

Thanks for asking. jotai-trpc is a simple wrapper around trpc vanilla client. It's not even related with React. I hope it technically works with next.js, but never tried. There might be something unexpected. Please give it a try and share what you find.

It's work fine, use it in Next 13.4.4

Were you able to use it with async data?

[lewxdev]

Any details or examples on how to get this working?

[ksonny]

I dug into this and tried to figure out how to make it work with next.js and app routing. The solution I came to was to avoid doing any requests or async until everything is delivered to the client by using an atom.

Here's a gist with the client I'm using: https://gist.github.com/ksonny/17583d98ee73fff0681613a1ada0a02b