14 |
24 |
25 |
16 |
27 |
34 |
35 |
17 | Return to home
18 |
25 |
26 | tRPC + Tanstack Query example
19 | 20 |21 | An example of how to use tRPC with Tanstack Query. Gets the data on the server and hydrates the 22 | initial page. Then uses createInfiniteQuery to fetch more data on the client. 23 |
24 |
28 |
33 |
29 |
32 | No drinks found
30 |Check back later for more drinks.
31 |
22 | {#each $query.data.pages as { drinksData }}
23 | {#each drinksData as drink (drink.id)}
24 |
25 |
26 |
27 | {drink.name}
28 |
29 |
30 | {drink.description}
31 |
32 |
33 |
34 |
35 |
36 |
37 | {/each}
38 | {/each}
39 |
40 | {/if}
41 |
42 |
43 | {#if $query.hasNextPage}
44 |
55 | {:else}
56 |
59 |
--------------------------------------------------------------------------------
/apps/web/src/lib/api/trpc-load.ts:
--------------------------------------------------------------------------------
1 | import { type RequestEvent, error } from "@sveltejs/kit";
2 | import { TRPCError } from "@trpc/server";
3 | import { getHTTPStatusCodeFromError } from "@trpc/server/http";
4 | import type { TRPC_ERROR_CODE_KEY } from "@trpc/server/rpc";
5 |
6 | import { createContext } from "$lib/api/createContext";
7 | import { appRouter } from "$lib/api/root";
8 |
9 | const HTTP_MSG_MAP = {
10 | NOT_FOUND: "Not found",
11 | UNAUTHORIZED: "Unauthorized",
12 | FORBIDDEN: "Forbidden",
13 | METHOD_NOT_SUPPORTED: "Method not supported",
14 | TIMEOUT: "Timeout",
15 | CONFLICT: "Conflict",
16 | PRECONDITION_FAILED: "Precondition failed",
17 | PAYLOAD_TOO_LARGE: "Payload too large",
18 | UNPROCESSABLE_CONTENT: "Unprocessable content",
19 | TOO_MANY_REQUESTS: "Too many requests",
20 | CLIENT_CLOSED_REQUEST: "Client closed request",
21 | INTERNAL_SERVER_ERROR: "Internal server error",
22 | BAD_REQUEST: "Bad request",
23 | PARSE_ERROR: "Parse error",
24 | } satisfies RecordNo more drinks
57 | {/if}
58 |
17 | Return to home
18 |
19 |
68 | 20 | Auth Demo 21 |
22 | 23 |24 | You can only test this locally. Check your terminal for the login link. 25 |
26 | 27 |
28 |
56 |
57 |
58 | {#if $session.data?.session?.user}
59 |
60 |
66 | {/if}
67 | 61 | You're logged in as. Your user ID is: {$session.data.session?.user.id} 62 |
63 | 64 | 65 |
2 | 
3 |
4 | Jayden's Stack ✨ 5 |
6 | 7 | 8 | Welcome to Jayden's Stack 👋, a modern, efficient, and feature-packed monorepo boilerplate focused on SvelteKit. This project is all about enhanced developer experience, massive scalability, and high performance. 9 | 10 | Give me a [follow on Twitter](https://twitter.com/itschrisjayden) for updates. And if you dig this repo, don't forget to give it a star ⭐️ 11 | 12 | > **Note****This is quite an opinionated monorepo**
But, it's the exact structure I've used to build several production apps. And for me (and team members) it totally rocks. Over time, I might add additional utitilies and other libraries, but I'm trying to keep things "simple" (for my own sake). 13 | 14 | ## But, I don't need "X" 15 | When building this monorepo template, I tried to make it so that if you don't need something, it's relatively easy to eject. There might be some manual work involved if you want to get rid of something (sorry, no fancy CLI's yet), but the main goal here is to save myself time and hopefully yours! 🎉 16 | 17 | ## Todos / Features 18 | 19 | - [x] tRPC 20 | - [x] Integrate Prisma + Planetscale 21 | - [x] Incorporate AuthJS. 22 | - [ ] Spin tRPC off into its own package. 23 | - [ ] Edge routes are currently not supported because of `SvelteKitAuth` in hooks.server.ts (it loads Prisma). 24 | 25 | Have solved this in other projects by copying over [these functions](https://github.com/nextauthjs/next-auth/blob/50a88bb8783b3d81b29a567bf680a6fc6dcd6573/packages/frameworks-sveltekit/src/lib/client.ts#L37) and changing `/auth/` to `/api/auth/`. But for this template it's probably better to wait until this hardcoded path is fixed upstream and these functions allow for custom base paths so that our "handle" can sit in `/src/routes/api/auth/[...authjs]` next to the `trpc` entrypoint. 26 | 27 | ## Featured Technologies 28 | - **tRPC**: Enables you to make end-to-end typesafe APIs like a ninja. It allows for the freedom of serverless applications without lock-ins and can be easily spun into a standalone server. 29 | - **TanStack Query**: Your utility belt for fetching, caching, and updating asynchronous data. Its integration with tRPC and SvelteKit is just flawless. 30 | - **SvelteKit**: A UI framework that's built on Svelte, enabling you to write stunningly concise components. 31 | - **Tailwind CSS**: A utility-first CSS framework that lets you create modern websites in record time without ever leaving your HTML. 32 | - **Shadcn Svelte**: Offers beautifully designed components without any lock-in. Just copy and paste them into your project. Simple as that! 33 | - **TurboRepo**: A Rust-built, incremental build system that's optimized for JavaScript and TypeScript. 34 | 35 | ## Installation 36 | 1. Clone this repository using git: 37 | ``` 38 | git clone https://github.com/multiplehats/jaydens-stack myapp 39 | ``` 40 | 2. Navigate into your newly created project directory: 41 | ``` 42 | cd myapp 43 | ``` 44 | 3. Replace instances of `acme`. 45 | 4. Install the dependencies: 46 | ``` 47 | pnpm install 48 | ``` 49 | 50 | 5. Copy .env.example in the root of the project. Generate a new `AUTH_SECRET`. And set the `DATABASE_URL`. The schema is setup for Planetscale, but you can easily modify it to a different need. 51 | ``` 52 | openssl rand -base64 32 # generate secret 53 | ``` 54 | 55 | 6. Start the party: 56 | ``` 57 | pnpm dev 58 | ``` 59 | Voila! You now have a local running instance of Jayden's Stack! 60 | 61 | ## Adding shadcn components 62 | 63 | Adding new components is pretty simple, you can either manually over components to the `packages/ui` directory. Or, `cd` into `apps/web` and run the shadcn CLI command, e.g. `npx shadcn-svelte add accordion`. This will put the new component in the `packages/ui` directory. 64 | 65 | Don't forget to update imports ✌️ 66 | 67 | ## Gotcha's & Notes 68 | 69 | - Prisma needs to be installed in `apps/web` as well as `packages/database`, because of this [issue](https://github.com/prisma/prisma/issues/6603), alternatively see [this Slack thread](https://prisma.slack.com/archives/CA491RJH0/p1677500075237659). 70 | 71 | ## Contributing 72 | Contributions, issues, and feature requests are welcome! See our [Contributing Guide](CONTRIBUTING.md) for more details. 73 | 74 | **Show your support** 75 | If this project helped you, give it a ⭐️! 76 | 77 | Feel free to provide feedback, report bugs, or make feature requests. You're welcome to create Pull Requests, too. 78 | 79 | Happy coding! 80 | -------------------------------------------------------------------------------- /apps/web/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 61 | 62 |
64 |
65 | tRPC + Tanstack Query
66 | See example
67 |
72 |
73 |
74 |
123 | 75 | Jaydens Stack 76 |
77 | 78 |79 | A modern monorepo boilerplate focused on developer experience, scalability, and performance. Start small 80 | and scale up with confidence. 81 |
82 | 83 | {#if $session.data?.session} 84 |85 | You're logged in as. Your user ID is: {$session.data.session?.user.id} 86 |
87 | {/if} 88 |
90 |
92 |
93 |
94 |
95 |
96 |
97 |
99 | {#each features as feature (feature.title)}
100 |
120 | {/each}
121 |
122 |