Kitchen Sink Wishlist

[KATT]

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
• [x] Nicer code example pages
• [ ] Interactive code examples with Monaco or similar
• [x] Implement code syntax highlighter for source code
• [x] Copy to clipboard
• [x] 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

• [x] getStaticProps 🎉 Implemented
  • [x] 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
• [x] Integration with react-hook-form - 🎉 Implemented
  • [x] Reusing validation schema server/client
  • [x] Invalidate queries
• [ ] API response caching
• [ ] QueryCell pattern - (#1734)
• [ ] Integration testing
• [x] 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 [email protected]:trpc/trpc.git
cd trpc/examples/kitchen-sink
yarn && yarn dx

Adding an example

1. Create a new folder in src/feature/X by duplicating some of the existing ones
2. Update meta.tsx
3. Create a new page in src/pages/X and import the file
4. Import the router from your example in src/server/routers/_app.ts

[waptik]

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.

[KATT]

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

[waptik]

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

[G3root]

hey @KATT

i like to work on home page redesign, is there any mockup or a design ?

[KATT]

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 :)

[G3root]

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 ?

[KATT]

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

• http://prisma.io/
• https://blitzjs.com/
• https://planetscale.com/
• https://www.artillery.io/

[merelinguist]

Copy to clipboard closed by https://github.com/trpc/examples-kitchen-sink/pull/3

I’m working on codesandbox links and almost done.

[alpacaaa]

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! :)

[KATT]

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 ☺

[ShiftySlothe]

I'm working on basic examples of:

• User auth with next-auth
• Suspense examples
• Error handling

[KATT]

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)

[mrcampbell]

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.?

[KATT]

@mrcampbell

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, 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.?

You can do:

• chat.room.byId({ id: 1 }) for the room, and
• chat.comments.byRoomId({ id: 1 }) for the room comments
• chat.stream({ ....... }) if it's my own stream of whatever stuff I'm subscribed to

[mrcampbell]

Hahaha shortly after I posted, I realized that it probably wasn't the right place or time to ask!

But that's legit!! I'll see about adding a feature or two!

On Sat, Jun 18, 2022, 1:43 PM Alex Johansson @.***> wrote:

@mrcampbell https://github.com/mrcampbell

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, 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.?

You can do:

• chat.room.byId({ id: 1 }) for the room, and
• chat.comments.byRoomId({ id: 1 }) for the room comments

— Reply to this email directly, view it on GitHub https://github.com/trpc/trpc/issues/1254#issuecomment-1159547782, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACE2K5M7NLHURVPFDHGCUA3VPYRHHANCNFSM5H44DIWQ . You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

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.