javascript - 错误：网络错误：url_1.URL 不是 new ApolloError 的构造函数

Question

我正在尝试使用 AWS iam 对 Apollo 客户端进行身份验证。

我有以下用于配置我的 Apollo 客户端的打字稿脚本

/* 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 节点 js 项目中运行良好。但是当我尝试查询数据时，我的前端反应项目中的相同代码会导致此错误。

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

这是我用于非工作前端项目的 package.json。

这是我用于工作后端项目的 package.json。

您可以看到我使用的所有软件包的版本都是相同的。

我的代码

我创建了一个新的 react 应用程序，并在github repoyarn create react-app my-app --template typescript中创建了我的问题的一个小演示。（repo 中没有 iam 凭据，但没有它们您仍然可以看到问题）

有人有什么主意吗;

• 什么可能导致这个问题？
• 我怎么能调试这个？

谢谢

标签： javascriptreactjstypescriptreact-apolloapollo-client

Answer 1

我解决了我的问题。

我更新了 aws4-axios

在 package.json 更改为

"aws4-axios": "^2.0.1",