PotatisMannen
tRPC with app router
i also posted this in the docs channel a while ago: https://discord.com/channels/867764511159091230/1079833901230461068/1121217111398817793
8 replies
Hey 👋
If not that, then im guessing best option is to only fetch server side data as prefetched data and pass that prefetched data to your query somehow. That way the query client is still responsible for data updates on the client when mutations happen and the rsc data fetch only serves the purpose of prefetching data for initial renders
5 replies
trpc with app dir nextjs
@docc. i just implemented it according to the thread. used the following docs:
1. use the
client usage - react query integration section of the trpc docs
2. use the fetch adapter as shown in the thread for app/api/trpc/[trpc]/route.ts
3. type your createContext function using the FetchCreateContextFnOptions type. import this from the same place package as the fetch adapter
4. find an example of how to make a ~/util/trpc.ts file which exports a trpc instance
4. make a trpc.Provider component as shown in the thread as well and wrap your layout with it
6. comsume your trpc.queryName.useQuery() calls in "use client" components11 replies
Any Benefit using tRPC for only remote api calls?
i would say its totally up to the pros and cons that you want. e.g.
- using react query will make your setup a lot less involved but still give you what you need for caching + state management, so you're not losing out on good client side data management
- the con of react query though is that once you need a custom stateful api you have to then default to making API routes which can be tedious boiler plate to set up
- trpc has the benefit of being heavy lifting to set up (relatively speaking, its not exactly a lot of work), but once you are set up adding procedures is very easy compared to having to manage individual API routes and handling requests and responses with the native fetch api.
- the con of trpc however is that consuming the api from outside your application loses out on the coupling you get from importing your trpc router, types and client instance into the respective parts of your application
overall i'd say if you are exposing API routes already and you have that set up, then rather making a small client instance that serve data to those routes is straightforward and comes at no cost. If you dont have any routing set up though, might be good opportunity to use trpc
P.S. take this with a pinch of salt 🤣 im only speaking from my own experience which is never a full picture
2 replies
trpc with app dir nextjs
basically you can use trpc client side with the app dir but you need to use the
trpc.Provider in a "use client" component that you can then wrap your app with in a layout, instead of using the withTRPC HOC like we used to do for the pages dir 🙂 hope that helps11 replies
trpc with app dir nextjs
@docc. https://github.com/trpc/trpc/issues/3297#issuecomment-1423905894 i found this thread that was linked to from the trpc docs where where folks discuss incremental improvements to using trpc with the app dir. the specific comment i linked here shows how to use the trpc provider in the app dir context. I havent tried it myself yet though, but ill come back and update this when i do.
11 replies