Правильный способ настройки AWSAppSyncClient, Apollo & React - PullRequest
Новая
       29

Правильный способ настройки AWSAppSyncClient, Apollo & React

1 голос
/ 22 марта 2020

У меня были проблемы с началом работы с React, Apollo и AWS -AppSyn c. Я не могу устранить это сообщение об ошибке: 

TypeError: this.currentObservable.query.getCurrentResult is not a function

Я использую обновленные пакеты @ apollo / Reaction-hooks и aws -appsyn c.

Мой текущий Настройка выглядит следующим образом. 

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

к упаковке. json. Затем перезапустите npm, установите и перезапустите сервер.

Кажется, ничто не решает мои проблемы.

Редактировать ** Вот репозиторий для воспроизведения проблемы: https://github.com/Rynebenson/IceCreamQL

1 Ответ

0 голосов
/ 23 апреля 2020

Я уже ответил на этот вопрос по другому связанному здесь вопросу о stackoverflow.

Как уже упоминалось в другом ответе, проблема заключается в том, что aws -appsyn c использует предыдущую версию apollo-client. Использование разрешений не является «более чистым» способом решения этой проблемы, поскольку вы исправляете версию зависимости, которая не полностью совместима с этой библиотекой.

Я настоятельно рекомендую вам создать собственный клиент apollo для AWS AppSyn c таким образом: 

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

...