return modified config from a server action

Question

Hello, I try to modify my axios interceptors request config from a client.
I created a seperate file for my axios:

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
});

//changes the configuration before sending
axiosInstance.interceptors.request.use(
  async (config) => {
    const modifiedConfig = await modifyConfig(config);
    return modifiedConfig;
  },
  (error) => Promise.reject(error)
);

I create a server action to get the cookies:

'use server';

import type { InternalAxiosRequestConfig } from 'axios';
import { cookies } from 'next/headers';

export const modifyConfig = async (config: InternalAxiosRequestConfig) => {
  const accessToken = cookies().get('access_token');

  config.headers.Authorization = `Bearer ${accessToken}`;

  return config;
};

When i try to call my axios in a client component i have this error:

Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.

'use client';

import apiClient from '../../../utils/axios';

const TestPage = () => {
  const handleSubmit = async () => {
    await apiClient
      .get('/private')
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };

  return (
    <div>
      <h1>LestPage</h1>
      <button onClick={handleSubmit}>CLICK ME</button>
    </div>
  );
};

export default TestPage;

LestPage

); }; export default TestPage;

American Crow · Answer

I'd highly recommend not using axios and next14/RSC together. You'll run into a lot of problems

If you need a wrapper for Authorization or any other axios feature use a thin wrapper like ky which is using the native fetch api under the hood and therefore natively integrates with nextjs.

Can read more here:

return modified config from a server action

2 Replies