javascript - ข้อผิดพลาด: ข้อผิดพลาดเครือข่าย: url_1.URL ไม่ใช่ตัวสร้างที่ new ApolloError

ฉันกำลังพยายามยืนยันตัวตนของ Apollo client กับ AWS IAM

ฉันมีสคริปต์ TypeScript ดังต่อไปนี้สำหรับการกำหนดค่า Apollo client ของฉัน

/* eslint-disable import/prefer-default-export */
/* eslint-disable import/no-mutable-exports */
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';

import axios from 'axios';
import { aws4Interceptor } from 'aws4-axios';
import { InMemoryCache } from 'apollo-cache-inmemory';

import { buildAxiosFetch } from '@lifeomic/axios-fetch';

interface IConnection {
  uri: string;
  region: string;
  accessKeyId: string;
  secretAccessKey: string;
  sessionToken: string;
}

export const initApolloClient = (connection: IConnection): ApolloClient<any> => {
  let apolloClient: ApolloClient<any> = null;

  const interceptor = aws4Interceptor(
    {
      region: connection.region,
      service: 'execute-api',
    },
    {
      accessKeyId: connection.accessKeyId,
      secretAccessKey: connection.secretAccessKey,
      sessionToken: connection.sessionToken,
    }
  );
  axios.interceptors.request.use(interceptor);

  console.log('Set apollo client');
  apolloClient = new ApolloClient({
    link: createHttpLink({
      uri: connection.uri,
      fetch: buildAxiosFetch(axios),
    }),
    cache: new InMemoryCache(),
  });

  return apolloClient;
};

โค้ดนี้ทำงานได้ดีในโปรเจกต์ Lambda Node.js ฝั่งแบ็กเอนด์ของฉัน แต่โค้ดเดียวกันในโปรเจกต์ React ฝั่งฟรอนต์เอนด์ทำให้เกิดข้อผิดพลาดนี้เมื่อฉันพยายามดึงข้อมูล

users-list.tsx:9 error Error: Network error: url_1.URL is not a constructor
    at new ApolloError (ApolloError.ts:46)
    at ObservableQuery.getCurrentResult (ObservableQuery.ts:199)
    at QueryData.getQueryResult (QueryData.ts:333)
    at QueryData._this.getExecuteResult (QueryData.ts:140)
    at QueryData.execute (QueryData.ts:61)
    at useBaseQuery.ts:63
    at useDeepMemo (useDeepMemo.ts:18)
    at useBaseQuery (useBaseQuery.ts:62)
    at useQuery (useQuery.ts:11)
    at UsersList (users-list.tsx:6)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at beginWork (react-dom.development.js:19063)
    at beginWork$1 (react-dom.development.js:23940)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at dispatchAction (react-dom.development.js:16139)**strong text**

:

:

คุณสามารถเห็นได้ว่ารุ่นของแพ็กเกจทั้งหมดที่ฉันกำลังใช้อยู่เหมือนกัน

โค้ดของฉัน

ฉันได้สร้างแอป React ใหม่โดยใช้ yarn create react-app my-app --template typescript และสร้างตัวอย่างเล็กๆ ของปัญหาของฉันในรีโป GitHub (ไม่มีข้อมูลประจำตัว iam ในรีโป แต่คุณยังสามารถเห็นปัญหาได้โดยไม่ต้องใช้)

มีใครพอจะมีความคิดบ้างไหม;

• อะไรอาจทำให้เกิดปัญหานี้?
• ฉันจะดีบักอันนี้ได้อย่างไร?

ขอบคุณ

คำตอบ #1

ฉันแก้ปัญหาของฉันได้แล้ว

ฉันได้อัปเดต aws4-axios

ใน package.json เปลี่ยนเป็น

"aws4-axios": "^2.0.1",