trpc/trpc

[TRP-62] Kitchen Sink Wishlist

KATT opened this issue · 16 comments

KATT commented

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

  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

TRP-62

KATT commented

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 commented

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 commented

hey @KATT

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

  • ❤️1
KATT commented

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 commented

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 commented

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

merelinguist commented

Copy to clipboard closed by trpc/examples-kitchen-sink#3

I’m working on codesandbox links and almost done.

  • 🎉2
  • ❤️2
alpacaaa commented

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 commented

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 ☺

  • 👍1
ShiftySlothe commented

I'm working on basic examples of:

  • User auth with next-auth
  • Suspense examples
  • Error handling
  • ❤️3
KATT commented

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 commented

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 commented

@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 commented
github-actions commented

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.