Fetcher with an AWS signedRequest is not updating data

Bug report

Description / Observed Behavior

useSWR is not updating data when using a custom fetcher:

  const request = { method: "GET", path: "/test" };

  const { data, error } = useSWR([request], fetcher);

Expected Behavior

To get data populated with the custom fetcher response.

Repro Steps / Code Example

My component:

import React, { memo, FC } from "react";
import { AmplifySignOut } from "@aws-amplify/ui-react";
import useSWR from "swr";

import fetcher from "./service/fetcher";

const AppWithRoutes: FC = () => {
  const request = { method: "GET", path: "/test" };

  const { data, error } = useSWR([request], fetcher);

  console.log("AppWithRoutes - data ===>", data);
  console.log("AppWithRoutes - error ===>", error);

  return (
    <>
      <AmplifySignOut />
      My AppWithRoutes
    </>
  );
};

export default memo(AppWithRoutes);

The custom fetcher:

import { Auth } from "aws-amplify";
import aws4 from "aws4";
import fetch from "unfetch";

import config from "../config";

const fetcher = (payload: any) => {
  Auth.currentCredentials()
    .then((currentCredentials) => {
      const credentials = Auth.essentialCredentials(currentCredentials);

      const apiGateway = {
        host: config.apiGateway.HOST,
        url: config.apiGateway.URL + payload.path,
      };

      const stage = config.apiGateway.URL.substring(
        config.apiGateway.URL.lastIndexOf("/") + 1
      );

      const request = {
        ...apiGateway,
        ...payload,
        path: `/${stage}${payload.path}`,
      };

      let signedRequest = aws4.sign(request, {
        // assumes user has authenticated and we have called
        // AWS.config.credentials.get to retrieve keys and
        // session tokens
        secretAccessKey: credentials["secretAccessKey"],
        accessKeyId: credentials["accessKeyId"],
        sessionToken: credentials["sessionToken"],
      });

      signedRequest.headers["Content-Type"] = "application/json";

      delete signedRequest.headers["Host"];
      delete signedRequest.headers["Content-Length"];

      // console.log("signedRequest *************>", signedRequest);

      return fetch(apiGateway.url, signedRequest).then(async (resp) => {
        const result = await resp.json();

        console.log(
          "signedRequest - result.response *************>",
          result.response
        );

        return {
          data: result.response,
          error: "",
          status: 200,
        };
      });
    })
    .catch((err) => err);
};

export default fetcher;

Additional Context

SWR version is: ^0.3.9

Note: I tried adding a return before Auth.currentCredentials() buuuut it causes an infinite loop of requests.

I also started a discussion here: https://github.com/vercel/swr/discussions/820

Thanks a bunch hackers!

[promer94]

// move out the request object, so that it would not create a new object in every render
const request = { method: "GET", path: "/test" };
const AppWithRoutes: FC = () => {
  const { data, error } = useSWR([request], fetcher);

  console.log("AppWithRoutes - data ===>", data);
  console.log("AppWithRoutes - error ===>", error);

  return (
    <>
      <AmplifySignOut />
      My AppWithRoutes
    </>
  );
};

For more information https://swr.vercel.app/docs/arguments#passing-objects

[promer94]

const fetcher = (payload: any) => {
  // It seems you miss the return statement here
  return Auth.currentCredentials().then(v => {
   ....
  })