'useSWR doesn't get data

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);
  }
swr


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source