Solid + tRPC Demo

4 |

About

5 |

6 | This is a remake of{" "} 7 | a dumb app I made in Next.js. This 8 | time it's in SolidJS! 9 |

10 |

11 |

13 | {"- "} 14 | 15 | Follow me on Twitter 16 | 17 |
19 | {"- "} 20 | 24 | Public Github repo 25 | 26 |

28 |

29 | ); 30 | }; 31 | 32 | export default AboutPage; 33 | -------------------------------------------------------------------------------- /src/pages/results.tsx: -------------------------------------------------------------------------------- 1 | import { Component, For, Show } from "solid-js"; 2 | import { createTrpcQuery, inferQueryResponse } from "../lib/trpc"; 3 | 4 | type PokemonQueryResult = inferQueryResponse<"public-results">; 5 | const generateCountPercent = (pokemon: PokemonQueryResult[number]) => { 6 | const { VoteFor, VoteAgainst } = pokemon._count; 7 | if (VoteFor + VoteAgainst === 0) { 8 | return 0; 9 | } 10 | return (VoteFor / (VoteFor + VoteAgainst)) * 100; 11 | }; 12 | 13 | const PokemonListing: Component<{ pokemon: PokemonQueryResult[number] }> = ({ 14 | pokemon, 15 | }) => { 16 | return ( 17 |

18 |

19 |

20 |

{pokemon.name}

21 |

22 |

{generateCountPercent(pokemon).toFixed(2) + "%"}

23 |

24 | ); 25 | }; 26 | 27 | const ResultsPage: Component = () => { 28 | const [data] = createTrpcQuery("public-results"); 29 | return ( 30 |

31 |

Results

32 | } 35 | > 36 | {(pokemon) => ( 37 |

38 | { 40 | const difference = 41 | generateCountPercent(b) - generateCountPercent(a); 42 | 43 | if (difference === 0) { 44 | return b._count.VoteFor - a._count.VoteFor; 45 | } 46 | 47 | return difference; 48 | })} 49 | > 50 | {(currentMon) => } 51 | 52 |

53 | )} 54 | 55 |

56 | ); 57 | }; 58 | 59 | export default ResultsPage; 60 | -------------------------------------------------------------------------------- /src/pages/vote.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Show } from "solid-js"; 2 | import { 3 | createTrpcMutation, 4 | createTrpcQuery, 5 | inferQueryResponse, 6 | } from "../lib/trpc"; 7 | 8 | const btn = 9 | "inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm font-medium rounded-full text-gray-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"; 10 | 11 | type PokemonFromServer = inferQueryResponse<"get-pokemon-pair">["firstPokemon"]; 12 | 13 | const PokemonListing = (props: { 14 | pokemon: PokemonFromServer; 15 | vote: () => void; 16 | disabled: boolean; 17 | }) => { 18 | return ( 19 |

24 |

25 | {props.pokemon.name} 26 |

27 |

33 | 40 |

41 | ); 42 | }; 43 | 44 | const VotePage: Component = () => { 45 | const [data, { refetch }] = createTrpcQuery("get-pokemon-pair"); 46 | 47 | const { mutate } = createTrpcMutation("cast-vote"); 48 | 49 | const voteForRoundest = (selected: number, against: number) => { 50 | mutate({ votedFor: selected, votedAgainst: against }); 51 | refetch(); 52 | return null; 53 | }; 54 | 55 | const fetchingNext = false; 56 | 57 | return ( 58 | <> 59 |

Which Pokémon is Rounder?

60 | } 63 | > 64 | {(response) => ( 65 |

66 | 69 | voteForRoundest( 70 | response.firstPokemon.id, 71 | response.secondPokemon.id 72 | ) 73 | } 74 | disabled={fetchingNext} 75 | /> 76 |

{"or"}

77 | 80 | voteForRoundest( 81 | response.secondPokemon.id, 82 | response.firstPokemon.id 83 | ) 84 | } 85 | disabled={fetchingNext} 86 | /> 87 |

88 |

89 | )} 90 | 91 | 92 | ); 93 | }; 94 | 95 | export default VotePage; 96 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "allowSyntheticDefaultImports": true, 8 | "esModuleInterop": true, 9 | "jsx": "preserve", 10 | "jsxImportSource": "solid-js", 11 | "types": ["vite/client"] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vercel-dev.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { 4 | "source": "/((?!api/.*).*)", 5 | "destination": "/index.html" 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import solidPlugin from "vite-plugin-solid"; 3 | 4 | export default defineConfig({ 5 | plugins: [solidPlugin()], 6 | build: { 7 | target: "esnext", 8 | polyfillDynamicImport: false, 9 | }, 10 | }); 11 | --------------------------------------------------------------------------------