Comments (6)
I guess until they find a way to deal with mutations, will be very hard to stop using stuff like react-query. Maybe we could use server components initial data in react query?
from next-13.
It looks like most of the querying can be covered by RSC & streaming. But I guess there are some cases when you want to query the actual JSON not for rendering HTML, but for some logic (e.g change the client component behavior based on a server response).
Will there be a way to sync state and make sync the underlying state of the queries from RSC -> client
If so, we probably only need react-query for mutations.
If there would be way for 2-way sync RSC <-> client (which I can't imagine) then yeah not sure if tRPC is needed, but we are far from it
from next-13.
I have been looking into RSC and React Query and wanted to share an idea I have been hacking on. It's still a work in progress but I would be interested in your thoughts and if something like this is useful for tRPC.
I have built a useData
hook which by my understanding can be called identically within an RCS (here) or client component (here).
Data fetched by using the hook in a RSC is also populated into the React Query cache on the frontend automatically.
The demo currently loads very slowly because:
- I am currently using
await setTimeout(..., 1000)
as a workaround for the lack ofSuspenseList
in stable React. I am going to investigate if there is a way to get what I need withoutSuspenseList
. - I am also using
await setTimeout(..., 1000)
to mock a network call.
The guts of the example are all in ./utils/someLibrary.tsx
.
The repo is here and it is hosted on Vercel here.
from next-13.
I didn't check the totality of Next 13 and just watched a video or two about this library but..
Doesn't this setup have a little too much going on for client side data interaction?
I mean, now that components are server side, and caching and invalidating is simplified; if an app does not have too many dynamic data interactions, why bother with tRPC and React Query?
I would have a very hard time following this code example if I didn't have any idea about Next 12, with routes and pages and stuff.... too much boilerplate for a dozen of requests.
Also.. where does load RQ's loading and error states sit in with Next 13?
from next-13.
@KATT tRPC is awesome, I'm just wonder on how tRPC will work with Next 13 App Directory feature?
would like know, anyone do some stuff with Next13 App Directory feature?
from next-13.
Moving this to trpc/trpc#3297 to not have two threads
from next-13.
Related Issues (11)
- Add next-auth and use a `privateProcedure`
- Add prisma according to `next-prisma-starter`
- Use `post.create`
- How to align the client/server DX? HOT 4
- // FIXME is there typing for this? HOT 3
- I broke something
- Idea: hydrate `react-query` cache more automagically
- tRPC 10 with Next 13 App dir HOT 3
- npm install issue HOT 1
- Maybe we wanna use `use()` HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-13.