vzemi

vzemi provides a wrapper for the global fetch method.

It exposes a Proxy object with two instances of Map: endpoints and origins.

Quick usage

1import vzemi from "vzemi"
2
3vzemi.endpoints.set("books", { uri: "/jumbo/books" })
4
5await vzemi.get("books", { index: 0, size: 100 })
6await vzemi.put("books", { index: 0, size: 100 })
7await vzemi.post("books", { index: 0, size: 100 })
8await vzemi.patch("books", { index: 0, size: 100 })
9await vzemi.delete("books", { index: 0, size: 100 })
10await vzemi.fetch("books", { index: 0, size: 100 })
11
12// FetchResponse: {
13//   MOCK?: boolean
14//   data: unknown | null,
15//   error?: 1,
16//   problems?: string[],
17// }

A word on the vzemi's structure

Both origins and endpoints extend the regular old Map and can be managed via the set, setMany, delete, and clear methods.

Endpoints

An EndPoint is just an object helper for HTTP requests. Its contents are used and/or merged when fetching data.

1interface EndPoint {
2  // This can be any full or relative path
3  uri: string
4
5  // Optional. vzemi.fetch defaults to this value. vzemi.get/post/etc. override this value
6  method?: string
7
8  // Optional. Predefined props that you might have for this endpoint
9  // Merged with request-specific params
10  props?: {}
11
12  // Optional. The actual fetch RequestInit object that includes headers, mode, etc
13  // Merged with origin-specific options
14  options?: {}
15
16  // Optional. Merged with origin-specific headers.
17  // Can be overwritten while making this request via '$headers'
18  headers?: {}
19
20  // Optional. Whatever you put here will be your `data` property
21  mock?: {some: [1, 22, 333], more: 'stuff', aaa: 111, bbb: 222, ccc: {ama: 'zing'}},
22  // OR... it can also be a function that recevies what `fetch` receives
23  mock?: (uri: string, options: {}, endpointName: string) => ()
24}

Set one

1vzemi.endpoints.set("books", { uri: "/jumbo/books" })

Set multiple

1zemi.endpoints.setMany({
2  endpoint1: { uri: "https://example.com/endpoint1" },
3  endpoint2: { uri: "https://example.com/endpoint2", method: "POST" },
4})

Origins

Before a request is being made, vzemi matches an EndPoint's uri to an existing key in origins.

This way, we can easily scope different header, credentials, or any other options, to an origin.

Set one

1vzemi.origins.set("/", { cache: "force-cache" })

Set multiple

1zemi.origins.setMany({
2  "/": {
3    mode: "cors",
4    headers: { LEVEL_0_H: "0_hehehe" },
5  },
6  "http://localhost:1001": {
7    mode: "no-cors",
8    cache: "force-cache",
9    signal: null,
10    boo2: "222_shakalaka",
11    headers: { auth: "DIESEL_123" },
12  },
13})

Usage and special props - everything is optional

1const mai_data = await fff.fetch('employee', {
2  // Your props are transformed to either CGI in the URL or body payload
3  a: 1,
4  b: 2,
5  c: 3,
6  
7  // Special props ARE OPTIONAL
8
9  // When used, its value will replace your regular non-special props
10  // which are usually used as your body payload
11  $body: {},
12
13  // Merged into a collection's url
14  $path: '/aaa/bbb/ccc',
15
16  // Merged with the fetch options object.
17  // Will overwrite any matching props provided by
18  // the global options and the collection itself
19  $options: {...},
20
21  // Merged with headers from the global setup object
22  // AND the headers in the collection itself
23  $headers: {x: 1, y: 2, z: 3},
24
25  // Causes to transform a non-GET request's body/payload to FormData
26  $formData: true,
27})

Aborting requests

The simplest way to abort a request is like this

1const ac = new AbortController()
2
3vzemi.get("someCollection", {
4  $options: { signal: ac.signal },
5})
6
7ac.abort()

Dispatching global event on any fetch, successful and failed

As vzemi is a Proxy, the setter function only accepts one possible key: emitAlways The only acceptable value is string

1vzemi.emitAlways = 'custom-event-name'