如何将 Redux Saga 与 AWS Amplify 结合使用？

Question

我正在尝试使用 AWS Amplify 的辅助方法和 Redux Saga 进行 API 调用。

import { API, graphqlOperation } from 'aws-amplify';
import * as R from 'ramda';
import { call, put } from 'redux-saga/effects';

import { listQuestions } from '../graphql/queries';
import { openSnackbar } from '../snackbar/snackbar-reducer';
import { addQuestions, fetchQuestions as fq } from './question-reducer';

const toAction = R.pipe(
  R.path(['data', 'listQuestions', 'items']),
  addQuestions
);

function* fetchQuestions() {
  try {
    const result = yield call(
      API.graphql,
      graphqlOperation(listQuestions, { limit: 100 })
    );
    yield put(toAction(result));
  } catch (e) {
    console.log(e);
    yield put(openSnackbar(e.message));
  }
}

如您所见，我正在使用来自 AWS Amplify 的 JS 框架部分的 API.graphql 和 graphqlOperation 辅助方法。

但是，这总是会引发错误：

TypeError: Cannot read property '_graphql' of null
    at APIClass.graphql (API.js:831)

APIClass.graphql 处的给定代码如下所示：

APIClass.prototype.graphql = function (_a) {
    var paramQuery = _a.query, _b = _a.variables, variables = _b === void 0 ? {} : _b, authMode = _a.authMode;
    var query = typeof paramQuery === 'string' ? parser_1.parse(paramQuery) : parser_1.parse(printer_1.print(paramQuery));
    var _c = query.definitions.filter(function (def) { return def.kind === 'OperationDefinition'; })[0], operationDef = _c === void 0 ? {} : _c;
    var operationType = operationDef.operation;
    switch (operationType) {
        case 'query':
        case 'mutation':
            return this._graphql({ query: query, variables: variables, authMode: authMode });
        case 'subscription':
            return this._graphqlSubscribe({ query: query, variables: variables, authMode: authMode });
    }
    throw new Error("invalid operation type: " + operationType);
};

为什么 this 会在这里 null？有没有办法将 AWS Amplify 中的 GraphQL 辅助方法与 Redux Saga 一起使用？

Answer 1

刚刚找到解决方案。您需要提供 this context 到 call.

yield call([API, 'graphql'], graphqlOperation(listQuestions, { limit: 100 }))

Answer 2

在我的例子中，我让 SignIt 使用这些行：

import { Auth } from 'aws-amplify';
const response = yield call([Auth, 'signIn'],{ username, password });

替换你需要的方法和参数即可，例如'signUp'

如何将 Redux Saga 与 AWS Amplify 结合使用？

How to use Redux Saga with AWS Amplify?

null

this

redux-saga

aws-amplify