https://github.com/jellydn/untypeable-wretch-demo
This is a demo project that showcases how to use the Untypeable library with Wretch to make API requests to JsonPlaceholder and display the data on a webpage.
https://github.com/jellydn/untypeable-wretch-demo
react signals typesafe typescript untypeable wretch
Last synced: 6 months ago
JSON representation
This is a demo project that showcases how to use the Untypeable library with Wretch to make API requests to JsonPlaceholder and display the data on a webpage.
- Host: GitHub
- URL: https://github.com/jellydn/untypeable-wretch-demo
- Owner: jellydn
- License: mit
- Created: 2023-04-15T16:06:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-10T09:49:23.000Z (6 months ago)
- Last Synced: 2025-04-10T10:53:12.830Z (6 months ago)
- Topics: react, signals, typesafe, typescript, untypeable, wretch
- Language: TypeScript
- Homepage: https://untypeable-demo.productsway.com/
- Size: 494 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Welcome to untypeable-wretch-demo 👋
## 🏠 [Homepage](https://github.com/jellydn/next-app-starter)
### ✨ [Demo](https://untypeable-demo.productsway.com/)
[![IT Man - Tip #35 - How to use #untypeable generate type-safe API clients [Vietnamese]](https://i.ytimg.com/vi/spfXOEeZpR0/hqdefault.jpg)](https://www.youtube.com/watch?v=spfXOEeZpR0)
In this demo project, we demonstrate how to use Untypeable in conjunction with the Wretch library to make API requests to JsonPlaceholder and display the retrieved data on a webpage.
## Why Untypeable
> One of the key benefits of Untypeable is that it provides a zero-bundle size option. This means that you can use Untypeable to generate type-safe API clients without adding any additional bundle size to your application. This can help to improve the performance and load times of your application.
```typescript
import { createTypeLevelClient, initUntypeable } from "untypeable";
import wretch from "wretch";
const u = initUntypeable();
export type Post = {
id: number;
title: string;
body: string;
userId: number;
};
// Create a router
const fetcherRouter = u.router({
"/posts": u
.input<{
userId?: number;
}>()
.output(),
});
const BASE_URL = "https://jsonplaceholder.typicode.com";
const externalApi = wretch(BASE_URL, { mode: "cors" }).errorType("json");
export const fetcher = createTypeLevelClient(
async (path, input) => {
const res = externalApi.get(`${path}?${new URLSearchParams(input)}`);
return res.json();
}
);
```
https://user-images.githubusercontent.com/870029/232274878-0025ba26-240b-4994-9659-ad21927e9a97.mov
## Why Wretch
Write something like this
```typescript
wretch("anything")
.get()
.notFound(error => { /* ... */ })
.unauthorized(error => { /* ... */ })
.error(418, error => { /* ... */ })
.res(response => /* ... */)
.catch(error => { /* uncaught errors */ })
```
instead of
```typescript
fetch("anything")
.then(response => {
if(!response.ok) {
if(response.status === 404) throw new Error("Not found")
else if(response.status === 401) throw new Error("Unauthorized")
else if(response.status === 418) throw new Error("I'm a teapot !")
else throw new Error("Other error")
}
else // ...
})
.then(data => /* ... */)
.catch(error => { /* ... */ })
```
Pretty neat,right? 😍
## Built with
- [jellydn/new-web-app: Frontend app generator, built on top vitejs](https://github.com/jellydn/new-web-app)
- [preactjs/signals: Manage state with style in every framework](https://github.com/preactjs/signals)
- [elbywan/wretch: A tiny wrapper built around fetch with an intuitive syntax.](https://github.com/elbywan/wretch)
- [emilkowalski/sonner: An opinionated toast component for React.](https://github.com/emilkowalski/sonner)
- [concrete.css: A simple and to the point classless CSS framework](https://concrete.style/)
- [total-typescript/untypeable: Get type-safe access to any API, with a zero-bundle size option.](https://github.com/total-typescript/untypeable)
- [total-typescript/ts-reset: A 'CSS reset' for TypeScript, improving types for common JavaScript API's](https://github.com/total-typescript/ts-reset)
## Install
```sh
yarn install
```
## Usage
```sh
yarn dev
```
## Author
- Website: https://productsway.com/
- Twitter: [@jellydn](https://twitter.com/jellydn)
- Github: [@jellydn](https://github.com/jellydn)
## Show your support
[](https://ko-fi.com/dunghd)
[](https://paypal.me/dunghd)
[](https://www.buymeacoffee.com/dunghd)
Give a ⭐️ if this project helped you!