usage with swr not working

[lukvermeulen]

Hey, this looks like an awesome utility!

This also works out of the box when using fetch directly, however it appears to not work with my usage of swr.

What would be the best approach to debug this and see why this is not working?

Thanks in advance!

Some snippets for reference:

// the api call does not get intercepted
 const {
    channels,
    isLoading,
    isError,
    mutate: mutateChannels,
  } = useChannels();

// this api call does get intercepted
  useEffect(() => {
    async function getChannels() {
      const response = await fetch("http://localhost:3030/channels");
      console.log(await response.json());
    }
    getChannels();
  }, []);

the useChannels hook:

const channelsFetcher = () => {
  return client
    .service("channels")
    .find()
    .then((res) => {
      return res.data;
    });
};

export default function useChannels() {
  const { data, error, mutate } = useSWR<Channel[]>(
    "channels",
    channelsFetcher
  );

  return {
    channels: data,
    isLoading: !error && !data,
    isError: error,
    mutate: mutate,
  };
}

[GunsStarR]

Hi @lukvermeulen! Facing the same issue with send XHR through superagent. Did you find solution? Or used something else?

[lukvermeulen]

Hey @GunsStarR, I ended up using "Mock Service Worker", after following this article. It works quite well for me.

[nutboltu]

@lukvermeulen I tried to run swr with storybook-addon-mock and it works properly. I have used their basic example for testing.

Looking at your code, can you tell me which type of client is this? is it going to call a fetch or XHR request?

const channelsFetcher = () => {
  return client
    .service("channels")
    .find()
    .then((res) => {
      return res.data;
    });
};

[nutboltu]

@GunsStarR it's confirmed that there's a bug in the package which breaks the superagent. You will get the fix in the upcoming release.

[nutboltu]

@GunsStarR this fix is released in version 2.4.0. Can you please check?

[lukvermeulen]

Hi @nutboltu, my client is configured to use native window.fetch

[pjaws]

I'm using swr along with axios in a custom fetcher and also experiencing issues. I posted a detailed comment in another issue about relative URLs here.

I'm using version 2.4.1.