[TRP-62] Kitchen Sink Wishlist
KATT opened this issue Β· comments
Kitchen Sink
- Live Site: https://kitchen-sink.trpc.io/
- Source: https://github.com/trpc/examples-kitchen-sink
The goal of the Kitchen Sink is to provide a good collection of useful design patterns when working with tRPC. It should be easy to navigate kitchen-sink.trpc.io and have it as a reference site β the northern star would be the Tailwind Docs.
I will probably replace the main website with this site & I want to experiment with monetization. Maybe this could be the "tailwindui" of trpc.
Wishlist
Overall site improvements
- Nicer home page
- Nicer code example pages
- Interactive code examples with Monaco or similar
- Implement code syntax highlighter for source code
- Copy to clipboard
- Nicer view, sort of (preview/code tab bar?)
- Link / embed / generate codesandbox on each example?
- Maybe some nicer way of handling features? Some code generation to make it easier to work on one feature in isolation?
- Login with GitHub
Features
-
getStaticProps
π Implemented- Basic examples
- Improve with splitting up into a "list" page and a
[id].tsx
page
- getServerSideProps
- Infinite queries
- Paginated pages
- Optimistic prefetching
- Good patterns with Suspense
- Error handling
- Integration with react-hook-form - π Implemented
- Reusing validation schema server/client
- Invalidate queries
- API response caching
-
QueryCell
pattern - (#1734) - Integration testing
- User auth
- ... + π ideas welcome!
Stretch goals
- Make this into the actual trpc.io main site?
- Potentially I'll limit view of examples to contributors & sponsors - maybe it's possible to make money off OSS?
How to contribute
Clone and start the Kitchen sink:
git clone git@github.com:trpc/trpc.git
cd trpc/examples/kitchen-sink
yarn && yarn dx
Adding an example
- Create a new folder in
src/feature/X
by duplicating some of the existing ones - Update
meta.tsx
- Create a new page in
src/pages/X
and import the file - Import the router from your example in
src/server/routers/_app.ts
Hey @KATT ,
I'm new to trpc and have been going through docs and the examples in this repo for days now(back and forth).
While giving kitchen-sink a try, I was going through its network requests and found this link https://kitchen-sink.trpc.io/api/trpc/reactHookForm.list,source.getSource,source.getSource?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%221%22%3A%7B%22json%22%3A%7B%22path%22%3A%22feature%2Freact-hook-form%2Frouter.ts%22%7D%7D%2C%222%22%3A%7B%22json%22%3A%7B%22path%22%3A%22pages%2Freact-hook-form.tsx%22%7D%7D%7D
And as you could see, the source code at https://github.com/trpc/trpc/blob/main/examples/kitchen-sink/src/feature/react-hook-form/router.ts#L5, https://github.com/trpc/trpc/blob/main/examples/kitchen-sink/src/feature/react-hook-form/router.ts and https://github.com/trpc/trpc/blob/main/examples/kitchen-sink/src/pages/react-hook-form.tsx are visible in the json response as json[0], json[1], and json[2] respectively.
Is that a normal thing?
Sorry if it is a false alarm.
Yeah yeah, @waptik, that's intended, I have it to enable "view source" functionality on e.g. https://kitchen-sink.trpc.io/react-hook-form
Comes from https://github.com/trpc/trpc/blob/main/examples/kitchen-sink/src/server/routers/source.ts
Yeah yeah, @waptik, that's intended, I have it to enable "view source" functionality on e.g. kitchen-sink.trpc.io/react-hook-form
Comes from
main
/examples/kitchen-sink/src/server/routers/source.ts
Oh my bad! Thanks for the clarification
hey @KATT
i like to work on home page redesign, is there any mockup or a design ?
i like to work on home page redesign, is there any mockup or a design ?
Hey @G3root! Thanks so much for the offer -- I'll try to make a mockup this week :)
i like to work on home page redesign, is there any mockup or a design ?
Hey @G3root! Thanks so much for the offer -- I'll try to make a mockup this week :)
Do you have any example sites in mind ?
i like to work on home page redesign, is there any mockup or a design ?
Hey @G3root! Thanks so much for the offer -- I'll try to make a mockup this week :)
Do you have any example sites in mind ?
Sites I think are nice -- shows code and are quite interactive and clear
Copy to clipboard closed by trpc/examples-kitchen-sink#3
Iβm working on codesandbox links and almost done.
Minor thing: the react-hook-form example defines validationSchema
twice. I think this one is redundant https://github.com/trpc/examples-kitchen-sink/blob/main/src/pages/react-hook-form.tsx#L6-L10
Thanks for trpc, it's really cool! :)
Minor thing: the react-hook-form example defines
validationSchema
twice. I think this one is redundant https://github.com/trpc/examples-kitchen-sink/blob/main/src/pages/react-hook-form.tsx#L6-L10
Correct! It should only have one schema, do you wanna make a PR and delete it perhaps? π
Thanks for trpc, it's really cool! :)
My pleasure βΊ
I'm working on basic examples of:
- User auth with next-auth
- Suspense examples
- Error handling
I'm working on basic examples of:
- User auth with next-auth
- Suspense examples
- Error handling
Wow, thanks! Note that Suspense have a bug in combo with @trpc/next
right now that I noticed yesterday (#1448)
I'd love to contribute! I'm afk, but will check tonight.
But is there a way to do websockets with rooms/wildcard routes?
Like have a chatroom example where there are trpc routes like
chat.room.*.comments
Where this resolver would return the data based on specific rooms, like chat.room.room42.comments
, where only those who can see room42
can pub/sub to that room, and concurrently, there could be room73, room99, etc.?
I'd love to contribute! I'm afk, but will check tonight.
π
But is there a way to do websockets with rooms/wildcard routes?
Please post these in the discussions or in discord as it's off-topic here, but I'll answer anyway :)
Like have a chatroom example where there are trpc routes like
chat.room.*.comments
Where this resolver would return the data based on specific rooms, likechat.room.room42.comments
, where only those who can seeroom42
can pub/sub to that room, and concurrently, there could be room73, room99, etc.?
You can do:
chat.room.byId({ id: 1 })
for the room, andchat.comments.byRoomId({ id: 1 })
for the room commentschat.stream({ ....... })
if it's my own stream of whatever stuff I'm subscribed to
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.