设置 AWSAppSyncClient、Apollo & 的正确方法反应 [英] Proper way to setup AWSAppSyncClient, Apollo & React

问题描述

我在开始使用 React、Apollo 和 AWS-AppSync 时遇到了问题.我无法解决此错误消息:

TypeError: this.currentObservable.query.getCurrentResult 不是函数

我正在使用@apollo/react-hooks 和 aws-appsync 的更新包.

我目前的设置是这样的.

从'react'导入React；从 'react-dom' 导入 ReactDOM；导入'./index.css';从'./App'导入应用程序；import * as serviceWorker from './serviceWorker';从./aws-exports"导入配置；从aws-appsync"导入 AWSAppSyncClient；从@apollo/react-hooks"导入{ ApolloProvider}；const 客户端 = 新 AWSAppSyncClient({网址:config.aws_appsync_graphqlEndpoint，区域:config.aws_appsync_region，授权:{类型:config.aws_appsync_authenticationType，apiKey:config.aws_appsync_apiKey}});ReactDOM.render(<ApolloProvider client={client}><React.StrictMode><应用程序/></React.StrictMode></ApolloProvider>,document.getElementById('root'));

我有一个函数可以进行如下查询:

从'react'导入React；从'@apollo/react-hooks'导入{useQuery}；从'graphql-tag'导入gql；const Flavors = () =>{const GET_FLAVORS = gql`查询列表所有{项目 {姓名，图片}}`;const { 加载，错误，数据 } = useQuery(GET_FLAVORS);if(loading) 返回 <p>loading...</p>if(error) return <p>出现问题...</p>返回 (<div>{data.listIceCreamTypes.items.map(type => {return 
<img src={type.image} alt={type.name}/><h1>{type.name}</h1>
})}

)}导出默认风味；

我已经完成了 https://github.com/apollographql 中描述的各种解决方案/react-apollo/issues/3148 如添加:

决议":{阿波罗客户端":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';从阿波罗链接"导入 { ApolloLink }；从 'aws-appsync-auth-link' 导入 { createAuthLink };从'apollo-link-http'导入{createHttpLink}；从 './aws-exports' 导入 { AppSyncConfig };从apollo-client"导入 ApolloClient；const url = AppSyncConfig.graphqlEndpoint;const region = AppSyncConfig.region;常量身份验证 = {类型:AppSyncConfig.authenticationType，apiKey:AppSyncConfig.apiKey};const 链接 = ApolloLink.from([createAuthLink({ url, region, auth }),createHttpLink({ uri: url })]);const 客户端 = 新 ApolloClient({关联，缓存:新的 InMemoryCache()});const WithProvider = () =>(<ApolloProvider client={client}><应用程序/></ApolloProvider>)导出默认 WithProvider

我还在中等

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

I'm using the updated packages of @apollo/react-hooks and aws-appsync.

My current setup looks like this.

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;

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"
 }

to package.json. Then re-running npm install and restarting the server.

Nothing seems to solve my issues.

Edit** Here's a repo to reproduce the problem: https://github.com/Rynebenson/IceCreamQL

解决方案

I already answered this on other related question here on stackoverflow..

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.

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

I also created a more detailed post on medium

这篇关于设置 AWSAppSyncClient、Apollo & 的正确方法反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！