Add the ability to add and remove hooks on existing instance

[rtorrente]

Hi everyone,

What do you think about adding the ability to add and remove hooks on an already created instance? I know it's possible to modify an instance with extend, but in this case a new instance is created and the hook on the original instance are not modified.

The use case I have in mind is the possibility of adding a hook from a useEffect in a React application that can be removed when the useEffect is cleaned up. This may be necessary if a JWT token is stored in a React context, for example.

On axios there is two functions for add/remove

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

Maybe I'm going in the wrong direction and this isn't the right method for this use case?

[sholladay]

Your question seems based on the premise that the original instance still existing is a problem. But why is it a problem? Once you've created your new instance, you can just stop using the original one and it will be garbage collected.

[rtorrente]

Hello @sholladay,

Thanks for your reply, but here is an use case that i encounter in my React App that I can't manage to handle with ky now

export const useAuthHeaderAxiosInterceptor = (): { isSetUp: boolean } => {
  const [isSetUp, setIsSetUp] = useState(false);
  const {token} = useAuth();

  useEffect(() => {
    const headerInterceptor = (config: InternalAxiosRequestConfig) => {
      if (!token || config.headers.Authorization) return config;
      
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    };

    const interceptor = axiosClient.interceptors.request.use(headerInterceptor);

    setIsSetUp(true);

    return () => {
      axiosClient.interceptors.request.eject(interceptor);
      setIsSetUp(false);
    };
  }, [token]);

  return { isSetUp };
};

Token lives only in the React Tree and I can't export a component from that.
I know I can create a useApi hook that exports a ky instance with the token but this complicates the use of React Query for example, where currently with Axios, all my queries are defined in a file, outside the React tree, this doesn't prevent the token from being added to queries with Axios.

Maybe I'm not going in the right direction, but I can't manage this use case with KY at the moment.

[suhaotian]

If you want move to ky is because the axios's size or fetch, you can try xior.js:

import xior from 'xior';

const axiosClient = xior.create({
  baseURL: 'https://example.com/api'
});


export const useAuthHeaderAxiosInterceptor = (): { isSetUp: boolean } => {
  const [isSetUp, setIsSetUp] = useState(false);
  const {token} = useAuth();

  useEffect(() => {
    const interceptor = axiosClient.interceptors.request.use((config) => {
      if (!token || config.headers.Authorization) return config;
      
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    });
     // OR
     // if (token) axiosClient.defaults.headers['Authorization'] = `Bearer ${token}`;

    setIsSetUp(true);

    return () => {
      axiosClient.interceptors.request.eject(interceptor);
      // delete axiosClient.defaults.headers['Authorization'];
      setIsSetUp(false);
    };
  }, [token]);

  return { isSetUp };
};