我在使用React,Apollo和AWS-AppSync时遇到了一些问题。我无法解决此错误消息:
TypeError: this.currentObservable.query.getCurrentResult is not a function
我正在使用@ apollo / react-hooks和aws-appsync的更新包。
我当前的设置看起来像这样。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import config from './aws-exports';
import AWSAppSyncClient from 'aws-appsync';
import { ApolloProvider } from '@apollo/react-hooks';
const client = new AWSAppSyncClient({
url: config.aws_appsync_graphqlEndpoint,
region: config.aws_appsync_region,
auth: {
type: config.aws_appsync_authenticationType,
apiKey: config.aws_appsync_apiKey
}
});
ReactDOM.render(
<ApolloProvider client={client}>
<React.StrictMode>
<App />
</React.StrictMode>
</ApolloProvider>,
document.getElementById('root')
);
而且我有一个函数可以使查询看起来像这样:
import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const Flavors = () => {
const GET_FLAVORS = gql`
query listAll {
items {
name,
image
}
}
`;
const { loading, error, data } = useQuery(GET_FLAVORS);
if(loading) return <p>loading...</p>
if(error) return <p>Something went wrong...</p>
return (
<div>
{
data.listIceCreamTypes.items.map(type => {
return <div key={type.name}>
<img src={type.image} alt={type.name} />
<h1>{type.name}</h1>
</div>
})
}
</div>
)
}
export default Flavors;
我经历了https://github.com/apollographql/react-apollo/issues/3148中描述的各种解决方案,例如添加:
"resolutions": {
"apollo-client": "2.6.3"
}
到package.json。然后重新运行npm install并重新启动服务器。
似乎没有什么能解决我的问题。
编辑**这是一个可重现此问题的存储库:https://github.com/Rynebenson/IceCreamQL
我已经在这里关于stackoverflow的其他相关问题回答了这个。
如其他答案中所述,问题是因为aws-appsync依赖于先前版本的apollo-client。在解决与该库不完全兼容的依赖版本时,使用分辨率不是解决此问题的“更干净”的方法。]
我强烈建议您通过以下方式为AWS AppSync创建自定义apollo客户端:
import { ApolloProvider } from '@apollo/react-hooks'; import { ApolloLink } from 'apollo-link'; import { createAuthLink } from 'aws-appsync-auth-link'; import { createHttpLink } from 'apollo-link-http'; import { AppSyncConfig } from '.aws-exports'; import ApolloClient from 'apollo-client'; const url = AppSyncConfig.graphqlEndpoint; const region = AppSyncConfig.region; const auth = { type: AppSyncConfig.authenticationType, apiKey: AppSyncConfig.apiKey }; const link = ApolloLink.from([ createAuthLink({ url, region, auth }), createHttpLink({ uri: url }) ]); const client = new ApolloClient({ link, cache: new InMemoryCache() }); const WithProvider = () => ( <ApolloProvider client={client}> <App /> </ApolloProvider> ) export default WithProvider
[我还在medium上创建了更详细的帖子