refactor: Apply new fetcher

Author: aXenDeveloper

apps/docs/content/docs/dev/fetcher.mdx

@@ -1,45 +1,52 @@
 ---
 title: Fetcher
-description: Fetch data from the server.
+description: Fetch data with type-safe API
 ---
 
-## Usage
+Our fetcher has RPC (Remote Procedure Call) style API. It allows you to call any API endpoint with type-safe API.
 
 <Callout type="warn" emoji="⚠️" title="Server-side only">
   The `fetcher()` function is only server-side. You cannot use it on the
   client-side.
 </Callout>
 
-import { Step, Steps } from 'fumadocs-ui/components/steps';
-
-<Steps>
-  <Step>
-  
-  ### Initial client
+## Usage
 
-`fetcher()` is a function to create client. Pass generic type with the response type and pass the `plugin` and `module` as arguments.
+To use the `fetcher()` function, you need to import it from the `vitnode/lib/fetcher` module. You also need to import the module you want to use.
 
-As an example, we will pass `UsersTypes` as a generic type.
+More about modules can be found in the [Modules](/docs/dev/modules) section.
 
 ```ts
 import { fetcher } from 'vitnode/lib/fetcher';
-import { UsersTypes } from 'vitnode/api/modules/users/users.module';
+import { usersModule } from 'vitnode/api/modules/users/users.module';
 ```
 
-```tsx
-const client = await fetcher<UsersTypes>({
-  plugin: 'core',
+```ts
+const res = await fetcher(usersModule, {
+  path: '/session',
+  method: 'get',
   module: 'users',
 });
 ```
 
-#### Options
+The response from `fetcher()` is compatible with the standard `fetch` Response API. Here are common way to work with the response:
+
+```ts
+// Basic response handling
+if (res.ok) {
+  const data = await res.json();
+  console.log(data);
+}
+```
+
+### Options
 
-You can pass the `options` object to modify the `fetch` function. For example we can pass `cache` option to enable the cache.
+You can pass the `options` object to modify the `fetch` function. For example we can pass `cache` option to enable the cache from `next`:
 
-```tsx
-const client = await fetcher<UsersTypes>({
-  plugin: 'core',
+```ts
+const res = await fetcher(usersModule, {
+  path: '/session',
+  method: 'get',
   module: 'users',
   // [!code ++]
   options: {
@@ -50,167 +57,28 @@ const client = await fetcher<UsersTypes>({
 });
 ```
 
-  </Step>
-
-  <Step>
-
-### Fetch data
-
-Call `client.{path}.{method}` with the data you want to send to the server as an argument.
-
-```tsx
-const data = await client.sign_in.$post(input);
-```
-
-  </Step>
-</Steps>
-
-## Server Functions
-
-Methods like `POST`, `PUT` and `DELETE` require to use [Server Functions](https://react.dev/reference/rsc/server-functions). You can create `mutation-api.ts` file and use it to call the `fetcher()` function with `FetcherInput` type.
-
-```ts title="mutation-api.ts"
-'use server';
-
-import { UsersTypes } from 'vitnode/api/modules/users/users.module';
-import { fetcher, FetcherInput } from 'vitnode/lib/fetcher';
-
-export const mutationApi = async (
-  input: FetcherInput<UsersTypes, '/sign_in', 'post'>,
-) => {
-  const res = await fetcher<UsersTypes>({
-    plugin: 'core',
-    module: 'users',
-  });
-
-  await res.sign_in.$post(input);
-};
-```
-
-Now you can call the `mutationApi()` function on the server-side.
-
-```ts title="useForm.ts"
-export const useForm = () => {
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    // [!code ++]
-    await mutationApi({
-      // [!code ++]
-      json: values,
-      // [!code ++]
-    });
-  };
-
-  return {
-    onSubmit,
-  };
-};
-```
-
-### Handling errors
-
-You can handle errors by checking the `status` property of the response.
-
-```ts title="mutation-api.ts"
-export const mutationApi = async (
-  input: FetcherInput<UsersTypes, '/sign_in', 'post'>,
-) => {
-  const res = await fetcher<UsersTypes>({
-    plugin: 'core',
-    module: 'users',
-  });
-
-  // [!code --]
-  await res.sign_in.$post(input);
-  // [!code ++]
-  const data = await res.sign_in.$post(input);
-  // [!code ++]
-
-  // [!code ++]
-  if (data.status !== 200) {
-    // [!code ++]
-    return { message: await data.text() };
-    // [!code ++]
-  }
-};
-```
-
-```ts title="useForm.ts"
-// [!code ++]
-import { useTranslations } from 'next-intl';
-// [!code ++]
-import { toast } from 'sonner';
-
-export const useForm = () => {
-  // [!code ++]
-  const t = useTranslations('core.global.errors');
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    const mutation = await mutationApi({
-      json: values,
-    });
-
-    // [!code ++]
-    if (!mutation?.message) return;
-    // [!code ++]
-
-    // [!code ++]
-    toast.error(t('title'), {
-      // [!code ++]
-      description: t('internal_server_error'),
-      // [!code ++]
-    });
-  };
-
-  return {
-    onSubmit,
-  };
-};
-```
-
-### Handling set-cookies
+### Handle set-cookies
 
-React Server Components cannot handle `set-cookies` headers. You need to handle them by using the `handleCookiesFetcher()` function.
+React Server Components cannot handle `set-cookies` headers from the server. To handle
+this, you need to pass the `allowSaveCookies` param to the `fetcher()` function. This will allow the cookies to be saved in the response.
 
-```ts title="mutation-api.ts"
-'use server';
+<Callout type="warn" emoji="⚠️" title="Server-side only">
+  The `allowSaveCookies` param works only when your request has method different
+  from `get` and response status has 2xx.
+</Callout>
 
-import { UsersTypes } from 'vitnode/api/modules/users/users.module';
-import {
-  fetcher,
-  FetcherInput,
-  // [!code ++]
-  handleSetCookiesFetcher,
-} from 'vitnode/lib/fetcher';
-
-export const mutationApi = async (
-  input: FetcherInput<UsersTypes, '/sign_in', 'post'>,
-) => {
-  const res = await fetcher<UsersTypes>({
-    plugin: 'core',
-    module: 'users',
-  });
-
-  // [!code --]
-  await res.sign_in.$post(input);
-  // [!code ++]
-  const data = await res.sign_in.$post(input);
+```ts
+const res = await fetcher(usersModule, {
+  path: '/sign_in',
+  method: 'post',
+  module: 'users',
   // [!code ++]
-  await handleSetCookiesFetcher(data);
-};
-```
-
-## Client-side
-
-If you want to use the `fetcher()` on the client-side, you need to use the `fetcherClient()` function.
-
-```tsx
-
+  allowSaveCookies: true,
+  args: {
+    body: {
+      email: '',
+      password: '',
+    },
+  },
+});
 ```
-
-## Custom fetcher
-
-If you want you can create your own `fetch` function, but you need to remember to pass headers like:
-
-- `x-forwarded-for` header - client IP address,
-- `Cookie` header - client cookies,
-- `user-agent` header - client user agent.

apps/web/src/plugins/core/langs/en.json

@@ -96,7 +96,10 @@
           "label": "Email",
           "invalid": "Invalid email address."
         },
-        "password": "Password",
+        "password": {
+          "label": "Password",
+          "required": "Password is required."
+        },
         "errors": {
           "access_denied": {
             "title": "Invalid credentials",

packages/vitnode/src/api/lib/module.ts

@@ -22,8 +22,8 @@ export interface BaseBuildModuleReturn<
 export interface BuildModuleReturn<
   P extends string,
   M extends string,
-  Routes extends Route[] = [],
-  Modules extends BaseBuildModuleReturn<P>[] = [],
+  Routes extends Route[] = Route[],
+  Modules extends BaseBuildModuleReturn<P>[] = BaseBuildModuleReturn<P>[],
 > extends BaseBuildModuleReturn<P, M, Routes> {
   modules?: Modules;
 }

packages/vitnode/src/api/lib/plugin.ts

@@ -11,7 +11,7 @@ export function buildPlugin<P extends string>({
   name,
   modules = [],
 }: {
-  modules?: BuildModuleReturn<P>[];
+  modules?: BuildModuleReturn<P, string>[];
   name: P;
 }): BuildPluginReturn {
   const hono = new OpenAPIHono();

packages/vitnode/src/api/modules/admin/admin.module.ts

@@ -7,5 +7,3 @@ export const adminModule = buildModule({
   plugin: 'core',
   routes: [sessionAdminRoute],
 });
-
-export type AdminTypes = typeof adminModule;

packages/vitnode/src/api/modules/middleware/middleware.module.ts

@@ -2,12 +2,8 @@ import { buildModule } from '@/api/lib/module';
 
 import { routeMiddleware } from './route';
 
-export type MiddlewareTypes = typeof middlewareModule;
-
 export const middlewareModule = buildModule({
   plugin: 'core',
   name: 'middleware',
   routes: [routeMiddleware],
 });
-
-export type BuildMiddlewareTypes = typeof middlewareModule;

packages/vitnode/src/api/modules/users/routes/sign-in.route.ts

@@ -30,6 +30,9 @@ export const signInRoute = buildRoute({
       },
     },
     responses: {
+      403: {
+        description: 'Access Denied',
+      },
       201: {
         content: {
           'application/json': {
@@ -41,15 +44,6 @@ export const signInRoute = buildRoute({
         },
         description: 'User signed in',
       },
-      403: {
-        description: 'Access Denied',
-        'application/json': {
-          schema: z.object({
-            id: z.string(),
-            token: z.string(),
-          }),
-        },
-      },
     },
   },
   handler: async c => {
@@ -61,10 +55,10 @@ export const signInRoute = buildRoute({
         data.id,
       );
 
-      return c.json({ id: data.id, token });
+      return c.json({ id: data.id, token }, 201);
     }
     const { token } = await new SessionModel(c).createSessionByUserId(data.id);
 
-    return c.json({ id: data.id, token });
+    return c.json({ id: data.id, token }, 201);
   },
 });

packages/vitnode/src/api/modules/users/users.module.ts

@@ -13,5 +13,3 @@ export const usersModule = buildModule({
   routes: [sessionRoute, signInRoute, signOutRoute, signUpRoute, testRoute],
   modules: [ssoUserModule],
 });
-
-export type UsersTypes = typeof usersModule;

packages/vitnode/src/lib/api/get-middleware-api.ts

@@ -1,17 +1,12 @@
-import { MiddlewareTypes } from '@/api/modules/middleware/middleware.module';
-
-import { fetcher } from '../fetcher';
+import { middlewareModule } from '@/api/modules/middleware/middleware.module';
+import { fetcher } from '@/lib/fetcher';
 
 export const getMiddlewareApi = async () => {
-  const client = await fetcher<MiddlewareTypes>({
-    plugin: 'core',
+  const res = await fetcher(middlewareModule, {
+    path: '/',
+    method: 'get',
     module: 'middleware',
-    options: {
-      cache: 'force-cache',
-    },
   });
 
-  const res = await client.index.$get();
-
   return await res.json();
 };