feat(future) server fetch for; (Error: Server Functions cannot be cal…

…led during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

src/app/actions.ts

@@ -0,0 +1,15 @@
+'use server';
+
+import { DataResponse } from '@/page';
+import ApiServerClient from '@/providers/axios-server';
+
+export async function fetchData() {
+  const res = (await ApiServerClient)
+    .get<DataResponse>('/v1/products')
+    .then((response) => {
+      return response.data.data;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}

src/app/api/auth/[...nextauth]/auth.ts

@@ -4,5 +4,5 @@ import { authConfig } from './auth.config';
 
 export const {
   handlers: { GET, POST },
-  auth: middleware,
+  auth,
 } = NextAuth(authConfig);

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useEffect, useState } from 'react';
 
+// import { fetchData } from '@/actions';
 import ProductCard from '@/components/ProductCard/ProductCard';
 import ApiClient from '@/providers/axios-client';
 
@@ -46,6 +47,9 @@ export default function Home() {
     return <div>Error: {error}</div>;
   }
 
+  // Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
+  // console.log(fetchData());
+
   return (
     <main className="container mx-auto py-8">
       <div className="grid md:grid-cols-3 gap-12">

src/providers/axios-server.ts

@@ -0,0 +1,41 @@
+import axios from 'axios';
+
+import { getSession } from 'next-auth/react';
+
+import { auth } from '@/api/auth/[...nextauth]/auth';
+
+const baseURL = process.env.NEXT_PUBLIC_BACKEND_API_URL || 'http://127.0.0.1:8000';
+
+const ApiServerClient = async () => {
+  const defaultOptions = {
+    baseURL: baseURL + `/api`,
+  };
+
+  const test = await auth();
+  console.log('test', test);
+
+  const instance = axios.create(defaultOptions);
+
+  // instance.interceptors.request.use(async (request) => {
+  //   const session = await getSession();
+  //   if (session) {
+  //     request.headers.Authorization = `Bearer ${session?.user.access_token}`;
+  //     request.headers.Accept = 'application/json';
+  //   }
+  //   return request;
+  // });
+
+  instance.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    (error) => {
+      console.log('error', error);
+      return Promise.reject(error);
+    },
+  );
+
+  return instance;
+};
+
+export default ApiServerClient();