0

I have a useSWR call that calls a fetcher. The fetcher gets the data as shown in the log but useSWR doesn't error or get the data, it just stays in the loading state. I have other calls that use the same format without issue so I don't know what's going on.

The SWR...

export function GetPayoutHistory(
  accessToken: string,
  walletId: string,
  page_limit: number,
  page_number: number,
  start_time: string,
  end_time: string
): GetPayoutHistory {
  const { data, error } = useSWR(
    `${BASE_URL}/wallets/${walletId}/payouts?page_limit=${page_limit}&page_number=${page_number}&start_time=${start_time}&end_time=${end_time}`,
    () =>
      getPayoutHistory(
        accessToken,
        walletId,
        page_limit,
        page_number,
        start_time,
        end_time
      ),
    {
      onErrorRetry: onSWRRetry,
    }
  );

The fetcher...

export async function getPayoutHistory(
  token: string,
  walletId: string,
  page_limit: number,
  page_number: number,
  start_time: string,
  end_time: string
): Promise<PayoutHistory> {
  return (
    axios({
      method: "get",
      url: `${BASE_URL}/wallets/${walletId}/payouts?page_limit=${page_limit}&page_number=${page_number}&start_time=${start_time}&end_time=${end_time}`,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      // .then((res) => res.data)
      .then((res) => {
        console.log("res.data", res.data);
        return res.data;
      })
  );
}

In the component...

  let now = new Date();

  const { isPHErr, isPHLoading, pHError, pH } = GetPayoutHistory(
    props.accessToken,
    props.walletId,
    100,
    1,
    "2022-01-01T00:00:00Z",
    now.toISOString()
  );

//...

  if (isPHErr) {
    return (
      <>
        <h1 style={{ margin: "10vh 0vh 10vh 0vh", textAlign: "center" }}>
          Problem retrieving payout information.
        </h1>
      </>
    );
  }
  if (isPHLoading) {
    return (
      <>
        <h1 style={{ margin: "10vh 0vh 10vh 0vh", textAlign: "center" }}>
          Loading...
        </h1>
      </>
    );
  }
  if (pH) {
    console.log("pH: ", pH);
  }
lookashinyone
  • 15
  • 5
  • Honestly, it looks fine (apart from the format, because you have duplicated string for some reason). Is that exact copypaste? Maybe you forgot to return somewhere, or there are extra brackets `{}` somewhere. If you log the data right after the hook is it undefined? – Danila Jan 26 '22 at 20:19
  • Yep. straight copy paste. Yes, the data is undefined right after the hook... – lookashinyone Jan 26 '22 at 20:38
  • You have this wrapper function `GetPayoutHistory`, but the name of it breaks hook naming standard. Are you using it as a hook? Maybe you are calling it outside of React? (Or maybe it is a component with such name?) – Danila Jan 26 '22 at 20:43
  • Updated the post to show how I'm using it in the component. The same naming scheme works in other places. – lookashinyone Jan 26 '22 at 20:55
  • I'm not sure if it's relevant but it makes the call over and over... – lookashinyone Jan 26 '22 at 20:57
  • Probably it loops because of `now.toISOString()`. Where `now` comes from? – Danila Jan 26 '22 at 21:17
  • Edited to show now. It's just a date object. – lookashinyone Jan 26 '22 at 21:20
  • 1
    Well, here is the problem. `now` changes on every render, so when you first get the data this component rerenders and `now` is now (no pun intended) different and it makes `swr` fetch new data, it fetches it again, rerenders, `now` changes and etc. – Danila Jan 26 '22 at 21:22
  • It's not in state why would it cause a rerender? – lookashinyone Jan 26 '22 at 21:25
  • 1
    `useSWR` makes it rerender after it gets the data. And `now` on the first render and on the second render is obviously different. Because it's different it makes `useSWR` refetch data with new params (new `now`) then it rerenders again and etc. Just log `now` and you will see what I mean – Danila Jan 26 '22 at 21:29
  • Ah, ok... Moving the now declaration outside the component changed the problem so I think you might have it. Thanks! – lookashinyone Jan 26 '22 at 21:34

0 Answers0