feat: add infinite query example

[kroucher]

This PR adds an additional sample to the kitchen sink collection, utilizing the infinite query procedure.

The Reddit /r/Aww subreddit is used as the API endpoint, which returns a cursor in the form of an after property.

There is basic styling to show similarities to a Reddit post, and a native intersection observer to call the fetchNextPage function. More than happy to make any changes to code or styling as requested.

Screenshots

Homepage

Infinite Query Page - Initial Loading State

Infinite Query Page - Content loaded

[vercel]

@kroucher is attempting to deploy a commit to the trpc Team on Vercel.

A member of the Team first needs to authorize it.

[c-ehrlich]

I don't like the idea of relying on an external api for something like this. Does the demo lose anything if it just uses an array of lorem ipsum sentences or something like that?

[kroucher]

I don't like the idea of relying on an external api for something like this. Does the demo lose anything if it just uses an array of lorem ipsum sentences or something like that?

I understand what you mean, I was tossing up between faux data and a real API and the main reason is that I didn't want to give the wrong impression/idea about the cursor - that it should come from the external service you're interacting with (which indicates there are more results), not just generated on your backend.

If the example showed a cursor being generated and passed through, I fear people will see that and think that's how cursors work.

It was also why the Aww subreddit was chosen as the external service - if there's any external service that will always be available, it's Reddit, and if there's a subreddit that won't have any undesirable content being returned, it's the Aww subreddit :P

[KATT]

I've completely missed this!! Thanks.

Definitely a good addition

[KATT]

The cursor should be validated so you can't inject anything into the url