Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the ability to add and remove hooks on existing instance #666

Open
rtorrente opened this issue Jan 4, 2025 · 2 comments
Open

Add the ability to add and remove hooks on existing instance #666

rtorrente opened this issue Jan 4, 2025 · 2 comments

Comments

@rtorrente
Copy link

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?

Repository owner deleted a comment Jan 4, 2025
@sholladay
Copy link
Collaborator

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
Copy link
Author

rtorrente commented Jan 13, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants