设置AWSAppSyncClient,Apollo&的正确方法反应 [英] Proper way to setup AWSAppSyncClient, Apollo & React
问题描述
我在使用React,Apollo和AWS-AppSync入门时遇到了问题.我无法解决此错误消息:
I've been having issues getting started with React, Apollo, and AWS-AppSync. I can't resolve this error message:
TypeError: this.currentObservable.query.getCurrentResult is not a function
我正在使用@ apollo/react-hooks和aws-appsync的更新包.
I'm using the updated packages of @apollo/react-hooks and 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')
);
我有一个函数可以使查询看起来像这样:
And I have a function that makes a query that looks like this:
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 ,例如添加:
I've gone through various solutions described in https://github.com/apollographql/react-apollo/issues/3148 such as adding:
"resolutions": {
"apollo-client": "2.6.3"
}
到package.json.然后重新运行npm install并重新启动服务器.
to package.json. Then re-running npm install and restarting the server.
似乎没有什么能解决我的问题.
Nothing seems to solve my issues.
编辑**这是重现该问题的存储库: https://github.com/Rynebenson/IceCreamQL
Edit** Here's a repo to reproduce the problem: https://github.com/Rynebenson/IceCreamQL
推荐答案
我已经在stackoverflow上的其他相关问题上回答了这个问题.
I already answered this on other related question here on stackoverflow..
如其他答案中所述,问题是因为aws-appsync依赖于先前版本的apollo-client.使用分辨率不是更干净"的解决方案.解决与该库不完全兼容的依赖项版本时解决此问题的方法.
As mentioned in other answer the problem is because aws-appsync is relying in an previous version apollo-client. Using resolutions is not the "cleaner" way to solve this problem as you're fixing a dependency version which is not fully compatible with this library.
我强烈建议您通过以下方式为AWS AppSync创建自定义apollo客户端:
I strongly recommend you to create a custom apollo client for AWS AppSync this way:
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
我还在 查看全文