Merge pull request #40 from kwhitley/v0.9

v0.9 - WIP

Author: kwhitley

.eslintrc

@@ -11,6 +11,10 @@
   ],
   "rules": {
     "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "prefer-const": "off",
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "semi": ["error", "never"]
   }
 }

README.md

@@ -7,7 +7,7 @@
 [![NPM Weekly Downloads](https://img.shields.io/npm/dw/itty-fetcher?style=flat-square)](https://npmjs.com/package/itty-fetcher)
 [![Open Issues](https://img.shields.io/github/issues/kwhitley/itty-fetcher?style=flat-square)](https://github.com/kwhitley/itty-fetcher/issues)
 
-[![Discord](https://img.shields.io/discord/832353585802903572?style=flat-square)](https://discord.com/channels/832353585802903572)
+[![Discord](https://img.shields.io/discord/832353585802903572?style=flat-square)](https://discord.gg/WQnqAsjhd6)
 [![GitHub Repo stars](https://img.shields.io/github/stars/kwhitley/itty-fetcher?style=social)](https://github.com/kwhitley/itty-fetcher)
 [![Twitter](https://img.shields.io/twitter/follow/kevinrwhitley.svg?style=social&label=Follow)](https://www.twitter.com/kevinrwhitley)
 

src/index.spec.ts

@@ -3,6 +3,8 @@ import 'isomorphic-fetch'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { FetcherOptions, RequestPayload, fetcher } from './index'
 
+const RANDOM_STRING = String(Math.random())
+
 describe('fetcher', () => {
   beforeEach(() => {
     fetchMock.reset()
@@ -15,7 +17,7 @@ describe('fetcher', () => {
 
   describe('config options', () => {
     describe('base', () => {
-      it("defaults to ''", () => {
+      it(`defaults to ''`, () => {
         expect(fetcher().base).toBe('')
       })
 
@@ -50,9 +52,69 @@ describe('fetcher', () => {
         expect(custom_fetch).toBeCalledWith('/foo', {
           method: 'GET',
           body: undefined,
-          headers: { 'content-type': 'application/json' },
+          headers: {},
+        })
+      })
+    })
+
+    describe('transformRequest', () => {
+      it('can modify the request before sending', async () => {
+        fetchMock.get('/', { status: 200, body: 'Success' })
+
+        const transformRequest = vi.fn(r => {
+          r.url = '/'
+          return r
         })
+        const response = await fetcher({ transformRequest }).get('/foo')
+
+        expect(transformRequest).toHaveBeenCalled()
+        expect(response).toBe('Success')
+      })
+
+      it('can take an async function', async () => {
+        fetchMock.get('/', { status: 200, body: 'Success' })
+
+        const transformRequest = async (r) => {
+          r.url = await '/'
+          return r
+        }
+
+        const response = await fetcher({ transformRequest }).get('/foo')
+
+        expect(response).toBe('Success')
+      })
+    })
+  })
+
+  describe('error handling', () => {
+    it('without response body', async () => {
+      fetchMock.get('/', { status: 404 })
+      const response: any = await fetcher().get('/').catch(e => e)
+
+      expect(response.status).toBe(404)
+      expect(response.message).toBe('Not Found')
+    })
+
+    it('with text response body', async () => {
+      fetchMock.get('/', { status: 404, body: RANDOM_STRING })
+      const response: any = await fetcher().get('/').catch(e => e)
+
+      expect(response.status).toBe(404)
+      expect(response.message).toBe(RANDOM_STRING)
+    })
+
+    it('with JSON response body', async () => {
+      fetchMock.get('/', {
+        status: 404,
+        body: { error: 'Not Found', details: RANDOM_STRING },
+        headers: { 'content-type': 'application/json' },
       })
+      const catchError = vi.fn(e => e)
+      const response: any = await fetcher().get('/').catch(catchError)
+
+      expect(response.status).toBe(404)
+      expect(response.details).toBe(RANDOM_STRING)
+      expect(response.error).toBe('Not Found')
     })
   })
 
@@ -174,7 +236,6 @@ describe('fetcher', () => {
         status: 500,
         expected: { error: 'Internal Server Error' },
       },
-
       // global headers
       'can set a header via global options as well as per-route overrides': {
         url: '/foo',
@@ -217,17 +278,17 @@ describe('fetcher', () => {
         expected: { url: base + '/?message=hello+world' },
       },
       'combines query params from the URL and the payload (object)': {
-        payload: { foo: 10 },
+        url: '/somewhere?foo=10',
+        payload: { foo: 12, bar: 'baz' },
         options: {
           base,
           transformRequest(req) {
-            const url = new URL(req.url)
-            url.searchParams.set('message', 'hello world')
-            req.url = url.toString()
+            console.log('base', base)
+            console.log('REQUEST', req.url)
             return req
           },
         },
-        expected: { url: base + '/?foo=10&message=hello+world' },
+        expected: { url: base + '/somewhere?foo=10&foo=12&bar=baz' },
       },
       'combines query params from the URL and the payload (URLSearchParams)': {
         payload: new URLSearchParams([
@@ -304,6 +365,11 @@ describe('fetcher', () => {
         if (expected.error && status) {
           fetchMock.mock(full_url, status)
           await expect(fetcher(options)[method](url, payload, init)).rejects.toThrow(expected.error)
+
+          if (expected.response) {
+            const getError = vi.fn(({ response, ...err }) => ({ ...err }))
+            await expect(getError).toHaveReturnedWith(expected.response)
+          }
           return
         }
 
@@ -374,11 +440,16 @@ function create_mock_url({
   // query params in the URL. To do this, we need to evaluate the payload
   // and add it to the URL.
   if (method === 'get' && payload && typeof payload === 'object' && !options?.transformRequest) {
-    const url = new URL(mock_url)
-    url.search = (
-      payload instanceof URLSearchParams ? payload : params_from_object(payload)
-    ).toString()
-    mock_url = url.toString()
+    try {
+      const url = new URL(mock_url)
+      url.search = (
+        payload instanceof URLSearchParams ? payload : params_from_object(payload)
+      ).toString()
+      mock_url = url.toString()
+    } catch (err) {
+      console.error(`Could not create url from ${mock_url}.`)
+    }
   }
+
   return mock_url
 }

src/index.ts

@@ -25,8 +25,8 @@ export type RequestPayload = StringifyPayload | PassThroughPayload
 export interface FetcherOptions {
   base?: string
   autoParse?: boolean
-  transformRequest?: (request: RequestLike) => RequestLike,
-  handleResponse?: (response: Response) => any,
+  transformRequest?: (request: RequestLike) => RequestLike | Promise<RequestLike>
+  handleResponse?: (response: Response) => any
   fetch?: typeof fetch
   headers?: Record<string, string>
 }
@@ -52,9 +52,7 @@ export type FetchyOptions = { method: string } & FetcherOptions
 
 const fetchy =
   (options: FetchyOptions): FetchyFunction =>
-  (url_or_path: string, payload?: RequestPayload, fetchOptions?: FetchOptions) => {
-    const method = options.method.toUpperCase()
-
+  async (url_or_path: string, payload?: RequestPayload, fetchOptions?: FetchOptions) => {
     /**
      * If the request is a `.get(...)` then we want to pass the payload
      * to the URL as query params as passing data in the body is not
@@ -67,40 +65,33 @@ const fetchy =
      * We clear the payload after this so that it doesn't get passed to the body.
      */
     // let url = new URL(url_or_path)
-    let search = ''
-
-    if (method === 'GET' && payload && typeof payload === 'object') {
 
-      const query = url_or_path.split('?')[0] || ''
-      const merged = new URLSearchParams(query)
-
-      const entries = payload instanceof URLSearchParams
-      // @ts-expect-error - ignore this
-      ? Array.from(payload.entries())
-      : Object.entries(payload)
+    const method = options.method.toUpperCase()
+    let [urlBase, queryParams = ''] = url_or_path.split('?')
 
-      // @ts-expect-error - ignore this
-      for (const [key, value] of entries) {
-        merged.append(key, value)
-      }
+    if (method === 'GET' && payload && typeof payload === 'object') {
+        const merged = new URLSearchParams(queryParams)
 
-      search = merged.toString() ? '?' + merged : ''
-      payload = undefined
+        // @ts-expect-error ignore this
+        const entries = (payload instanceof URLSearchParams ? payload : new URLSearchParams(payload)).entries()
+        for (let [key, value] of entries) merged.append(key, value)
 
+        queryParams = '?' + merged.toString()
+        payload = null
     }
 
-    const full_url = (options.base || '') + url_or_path + search
+    const full_url = (options.base || '') + urlBase + queryParams
 
     /**
      * If the payload is a POJO, an array or a string, we will stringify it
      * automatically, otherwise we will pass it through as-is.
      */
+
+    const t = typeof payload
     const stringify =
-      typeof payload === 'undefined' ||
-      typeof payload === 'string' ||
-      typeof payload === 'number' ||
+      t === 'number' ||
       Array.isArray(payload) ||
-      Object.getPrototypeOf(payload).constructor.name === 'Object'
+      payload?.constructor === Object
 
     const jsonHeaders = stringify ? { 'content-type': 'application/json' } : undefined
 
@@ -121,27 +112,28 @@ const fetchy =
      * in the options. This allows the user to modify the request before it is
      * sent.
      */
-    if (options.transformRequest) req = options.transformRequest(req)
+    if (options.transformRequest) req = await options.transformRequest(req)
 
     const { url, ...init } = req
 
-    const f = typeof options?.fetch === 'function' ? options.fetch : fetch
+    const f = options?.fetch || fetch
+    let error
 
-    return f(url, init).then((response) => {
-      if (options.handleResponse)
-        return options.handleResponse(response)
+    return f(url, init).then(async (response) => {
+      if (options.handleResponse) return options.handleResponse(response)
 
       if (!response.ok) {
-        throw new StatusError(response.status, response.statusText)
-      }
+        error = new StatusError(response.status, response.statusText)
+      } else if (!options.autoParse) return response
 
-      if (!options.autoParse) return response
+      const content = await (response.headers.get('content-type')?.includes('json') ? response.json() : response.text())
 
-      const contentType = response.headers.get('content-type')
+      if (error) {
+        Object.assign(error, typeof content === 'object' ? content : { message: content || error.message })
+        throw error
+      }
 
-      return contentType?.includes('json')
-              ? response.json()
-              : response.text()
+      return content
     })
   }
 
@@ -150,16 +142,10 @@ export function fetcher(fetcherOptions?: FetcherOptions) {
     {
       base: '',
       autoParse: true,
-      ...fetcherOptions,
+      ...fetcherOptions
     },
     {
-      get: (obj, prop: string) =>
-        obj[prop] !== undefined
-          ? obj[prop]
-          : fetchy({
-              method: prop,
-              ...obj,
-            }),
-    },
+      get: (obj, prop: string) => obj[prop] ?? fetchy({ method: prop, ...obj })
+    }
   )
 }