Using a hook inside SWRConfiguration

[Jerryhu1]

Hi,

I'm trying to combine a Zustand store with SWR. I wish to dispatch a Zustand action through onLoadingSlow, onSuccess and onError, but this gives me the following error: Invalid hook call. Hooks can only be called inside of the body of a function component. Is this possible somehow?

Minimal repro codesandbox: https://codesandbox.io/s/lucid-pasteur-fin3w

I used to do this with a Redux dispatch which worked fine, but now when refactoring to Zustand it does not seem to be possible anymore. Here's the code:

export const SWRGlobalConfig: SWRConfiguration = {
  errorRetryCount: 3,
  loadingTimeout: 2000,
  onLoadingSlow: () => {
    useDisplayState(state => state.activateLoader)();
  },
  onSuccess: () => {
    useDisplayState(state => state.deactivateLoader)();
  },
  onError: err => {
    const e = err as AxiosError;
    if (e.isAxiosError) {
      const addNotification = useNotificationStore(state => state.addNotification);
      addNotification({
        key: uuidv4(),
        message: e.message,
        severity: "error",
      });
    } else {
      const addNotification = useNotificationStore(state => state.addNotification);
      addNotification({
        key: uuidv4(),
        message: err,
        severity: "error",
      });
    }
    useDisplayState(state => state.deactivateLoader)();
  },
};

Help is greatly appreciated!

[huozhi]

Does defining the dispatcher above SWRConfiguration work for you? like

const showLoading = useDisplayState(state => state.activateLoader)
export const SWRGlobalConfig = {
  onLoadingSlow: () => { showLoading(); },
  // ...

You cannot use hooks inside those callbacks since they're just callbaks triggered on state change, which is outside of react render scope.

[huozhi]

could you share a codesandbox with a minimal repro that we can check what's going on? 🙏

[Jerryhu1]

First time doing this, here you go!: https://codesandbox.io/s/lucid-pasteur-fin3w

[nielskrijger]

Being unfamiliar with useSWR and Zustand, my first thought was to write a custom hook that wraps useSWR and do any global state updates there instead.

Something like this: https://codesandbox.io/s/green-wildflower-r5kcc?file=/src/App.tsx

[huozhi]

Yeah @nielskrijger is right, the problem in the reproduction given above is: you need to wrap hooks into functional component, and then passdown the handlers return from hooks to swr configuration.

import useDisplayState from "./store/display";

function ConfiguredApp() {
  const show = useDisplayState((state) => state.activateLoader);
  const hide = useDisplayState((state) => state.deactivateLoader);
  const config: SWRConfiguration = {
    errorRetryCount: 3,
    loadingTimeout: 2000,
    onLoadingSlow: show,
    onSuccess: hide,
    onError: hide
  };
  return (
    <SWRConfig value={config}>
      <App />
    </SWRConfig>
  );
}

const rootElement = document.getElementById("root");

render(<ConfiguredApp />, rootElement);

You cannot directly call it outside of react render tree

[Jerryhu1]

Makes a lot of sense. Both solutions work, thanks!

[Jerryhu1]

As an additional answer to this, I found out zustand has a non-hook method of accessing the store as well by using useStore().getState(), the following code works without adding it to the FC:

const { addNotification } = useNotificationState.getState()
const { activateLoader, deactivateLoader } = useDisplayState.getState()

export const SWRGlobalConfig: SWRConfiguration = {
  errorRetryCount: 3,
  loadingTimeout: 2000,
  onLoadingSlow: () => {
    activateLoader()
  },
  onSuccess: () => {
    deactivateLoader()
  },
  onError: err => {
    // TODO: add metrics for client side failures
    // by reporting to some backservice
    const e = err as AxiosError;
    if (e.isAxiosError) {
      addNotification({
        key: uuidv4(),
        message: e.message,
        severity: "error",
      })
    } else {
      addNotification({
        key: uuidv4(),
        message: err,
        severity: "error",
      });
    }
    deactivateLoader();
  },
};