Light

l-blondy / up-fetch Goto Github PK

View Code? Open in Web Editor NEW

35.0 2.0 1.0 474 KB

Tiny & Composable fetch configuration tool with sensible default.

License: MIT License

TypeScript 100.00%

axios fetch fetch-api fetch-wrapper request upfetch valibot validation zod wrapper

up-fetch's Introduction

Hi I'm Laurent 👋

Frontend Dev based in Italy

github stats

Pinned Repos

Top Techs

Contributions

github contribution grid snake animation

up-fetch's People

Contributors

Stargazers

Watchers

Forkers

hufei365

up-fetch's Issues

type inference when using a curried generic on parseResponse

Using a non generic curried parser there is no issue

const upfetch = up(fetch)
const curried = () => (res: Response) => res.text()

const data = await upfetch('', {
   parseResponse: curried(),
   transform: (data) => data,
   onSuccess(data) {
      // ✅ ok
      expectTypeOf(data).toEqualTypeOf<string>()
   },
}) 
// ✅ ok
expectTypeOf(data).toEqualTypeOf<string>()

When using a curried parser everything is ok...

const data = await upfetch('', {
   parseResponse: withZod(z.object({ a: z.string() })),
})
// ✅ ok
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

...until either onSuccess or transform are defined

const data = await upfetch('', {
   parseResponse: withZod(z.object({ a: z.string() })),
   transform: (data) => {
      // ❌ This fails, data is `any`
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   }
})
// ❌ This fails, data is `any`
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

but it works fine when using the functional version of the fetcher options

const data = await upfetch('', () => ({
   parseResponse: withZod(z.object({ a: z.string() })),
   transform: (data) => {
      // ✅ OK
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   }
}))
// ✅ OK
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

Also fine when unwrapping the curried function

const data = await upfetch('', {
   parseResponse: (res, opts) => withZod(z.object({ a: z.string() }))(res, opts),
   transform: (data) => {
      // ✅ OK
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   }
})
// ✅ OK
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

When using a default parser the data type in the callbacks come from the default parser, not the fetcher's

const upfetch = up(fetch, () => ({
   parseResponse: () => 1
}))

const data = await upfetch('', {
   ❌ Error on `parseResponse`
   parseResponse: withZod(z.object({ a: z.string() })),
   transform: (data) => {
      // ❌ This fails, data is `number`
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   },
   onSuccess: (data) => {
      // ❌ This fails, data is `number`
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   }
})
// ❌ This fails, data is `any`
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

Same thing with the functional options, it works fine

const upfetch = up(fetch, () => ({
   parseResponse: () => 1
}))

const data = await upfetch('', {
   parseResponse: withZod(z.object({ a: z.string() })),
   transform: (data) => {
      // ✅ OK
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   },
   onSuccess: (data) => {
      // ✅ OK
      expectTypeOf(data).toEqualTypeOf<{ a: string }>()
   }
})
// ✅ OK
expectTypeOf(data).toEqualTypeOf<{ a: string }>()

That's quite strange...

Add another entrypoint for parsers

Since the withValibot parser imports the parse function from valibot, valibot cannot be an optional peerDependency.

Even though this has no impact on the bundle size of up-fetch, in order to declare valibot as an optional peerDependency it would be better to expose the parsers via another entrypoint, eg import { withValibot, withZod } from 'up-fetch/parsers'

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.