Zod http client

This package allows you to validate http requests and responses using Zod schemas.

Installation

1pnpm add @wisemen/vue-core-zod-http-client

Usage

Create a new file httplib.ts and add the following code:

1import { createHttpZodClient } from '@appwise/zod-http-client'
2import { useClipboard } from '@vueuse/core'
3import { useToast } from '@wisemen/vue-core'
4import { computed } from 'vue'
5
6import { CURRENT_ENVIRONMENT } from '@/constants/environment.constant.ts'
7import { axios } from '@/libs/axios.lib'
8
9interface ZodError {
10  error: unknown
11  method: string
12  url: string
13}
14
15function onZodError({ error, method, url }: ZodError): void {
16  const toast = useToast()
17  const clipboard = useClipboard({
18    copiedDuring: 2000,
19  })
20
21  if (CURRENT_ENVIRONMENT !== 'production') {
22    toast.error({
23      action: {
24        label: computed<string>(() => clipboard.copied.value ? 'Copied!' : 'Copy error'),
25        onClick: () => {
26          void clipboard.copy(`${method.toUpperCase()} ${url} returned a malformed response.\n\n${JSON.stringify(error, null, 2)}`)
27        },
28      },
29      durationInMs: 20000,
30      icon: 'alertCircle',
31      message: `${method.toUpperCase()} ${url} returned a malformed response.`,
32    })
33  }
34
35  console.error(`${method.toUpperCase()} ${url} returned a malformed response\n\n`, JSON.stringify(error, null, 2))
36}
37
38export const httpClient = createHttpZodClient({
39  axios,
40  onZodError,
41})