javascript - Lỗi: Lỗi mạng: url_1.URL không phải là một constructor tại new ApolloError

Tôi đang cố gắng xác thực client Apollo với AWS IAM.

Tôi có đoạn script TypeScript sau để cấu hình client Apollo của mình

/* 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;
};

Mã này hoạt động tốt trong dự án lambda node js phía backend của tôi. Nhưng cùng một mã trong dự án react phía frontend của tôi gây ra lỗi này khi tôi cố gắng truy vấn dữ liệu.

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**

:

:

Bạn có thể thấy rằng các phiên bản của tất cả các gói mà tôi đang sử dụng đều giống nhau.

Mã của tôi

Tôi đã tạo một ứng dụng React mới bằng yarn create react-app my-app --template typescript và tạo một bản demo nhỏ về vấn đề của tôi trong một kho GitHub. (Không có thông tin đăng nhập IAM trong kho nhưng bạn vẫn có thể thấy vấn đề mà không cần chúng)

Có ai biết gì không;

• Nguyên nhân nào có thể gây ra sự cố này?
• Làm thế nào tôi có thể gỡ lỗi cái này?

Cảm ơn

Câu trả lời #1

Tôi đã sửa vấn đề của mình.

Tôi đã cập nhật aws4-axios

Trong package.json đã thay đổi thành

"aws4-axios": "^2.0.1",