Fetcher with an AWS signedRequest is not updating data

[josoroma-zz]

Hi Hackers!

Not sure why data is not getting updated:

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

SWR version is: ^0.3.9

My functional 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);

./service/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"];

      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;

I also started a bug report here: #821

Thanks a bunch!!!