icflorescu / trpc-sveltekit-example

A sample SvelteKit application built to illustrate the usage of ✨ trpc-sveltekit.

😎 tRPC-SvelteKit example: Bookstall

A sample SvelteKit application built to illustrate the usage of trpc-sveltekit.

Screenshot

Acknowledgements

Huge thanks to Alex / KATT, for bringing us tRPC and for being the first sponsor of tRPC-SvelteKit! 🎉

License

The ISC License.

trpc-sveltekit-example's Issues

Add a screenshot in README

Something like this:

"npm run build" throws superjson.registerCustom is not a function

Hey, thanks for the great work on setting everything up! Wanted to give tRPC with SvelteKit a try, but the example doesn't build. It works fine when ran locally, but the build itself fails.

Thanks! 💯

This doesn't work

The CodeSandbox generates a lot of errors and doesn't start

Add new screenshot in the README

Something like this:

upload file

Hi @icflorescu thanks for the clear example.
Do you have any plan (to add example) or idea on how to do file/image uploading?

Thank you

Request for error handling example

I was reading through the tRPC Error Handling docs, but wasn't quite sure how to implement that using trpc-sveltekit.

I figured this example project would be a great place for that. :-)

First request running twice

Right now, visiting a page that has a trpc query in it's load function (ex. /authors) , will result in that trpc query running twice. First on the server, then again on the client. This is happening (I think) because we're not using the fetch provided by load.

Note: This is only applicable to the first request, since all other requests after that are client side only.

There two ways to go around this issue:

1. Move the trpc query from load to a page endpoint.
2. Find a way to make trpc use the fetch provided by load. No idea how.

This would ensure that the request would not happen twice. It would happen only on the server.

From the docs:

When fetch runs on the server, the resulting response will be serialized and inlined into the rendered HTML. This allows the subsequent client-side load to access identical data immediately without an additional network request.

Update to Svelte Version 1.0.0-next.426

Update the example to the newest version of SvelteKit due to mayor changes in Folder structure.

Add open in CodeSandbox button in README

404 not found after running the installation steps

After running the installation steps and opening the URL in the browser i'm getting the following:

pnpm doesn't work

Oddly this doesn't happen with yarn and npm.
After installing with pnpm I get the following error:

Any ideas?

adding authentication

i remember having a lot of trouble to add auth in my app using this library (because of the cookies). i was able to get it to work, but after the recent sveltekit update (which removed the session store) im having a lot of trouble to get it to work

it would be nice to showcase authentication via cookies in this example

Question: Why is the trpc client initialized multiple times in the `.svelte` files?

I apologize if this is a dumb question, but I am quite new to tRPC and still trying to figure stuff out. Why, in every method in the .svelte templates is the trpc client invoked for each query, mutation, etc? Eg,

const reloadBooks = async () => {
  loading = true;
  data.books = await trpc().query('books:browse', query);
  loading = false;
};

This doesn't seem to be a thing in the server code, where trpc() is invoked once and is then reused mutiple times. Won't doing that work in the client code?