我正在尝试使用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项目中运行良好。但是，当我尝试查询数据时，前端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**
这是我为非工作前端项目准备的软件包.json。
这是我的工作后台项目的package.json。
您可以看到，我使用的所有软件包的版本都是相同的。
我的代码
我已经用yarn create react-app my-app --template typescript创建了一个新的react应用程序，并在github repo中创建了我的问题的小演示。(回购中没有iam凭据，但如果没有它们，您仍然可以看到问题(
有人知道吗
- 是什么原因导致了这个问题
- 我该如何调试
感谢
我解决了我的问题。
我更新了aws4 axios
在package.json中更改为
"aws4-axios": "^2.0.1",