通过 apollo compose 在 react-apollo graphql 中通过 redux 调用使用 redux 变量的问题答案

【问题标题】：Issue using redux variables via redux call inside react-apollo graphql with apollo compose通过 apollo compose 在 react-apollo graphql 中通过 redux 调用使用 redux 变量的问题
【发布时间】：2018-11-11 05:09:05
【问题描述】：

我的组件需要调用 graphql 查询，但它需要只能由 redux 使用的变量。所以我已经映射了 redux 的连接来响应 apollo compose。但我在从 reducer 获取数据时遇到问题，并且调用未正确加载。

class abc extends Component {
   componentWillMount() {
     console.log(this.props.variableData); // Getting empty object.
   }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ variableDataFetchAction }, dispatch);
}

function mapStateToProps(state) {
  return {
     variableData: state.reducerName.variableData,
  }
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  graphql(MyQuery, {
    options: props => {
      return {
        .....,
        variables: props.variableData,
      };
    },
  }),
)(abc);

我需要知道我可以还原的方式是否有问题。因为我的商店似乎是空的。

【问题讨论】：

我想你混合了连接和撰写
我正在使用 react-apollo 中的 compose 并在 compose 中使用 redux connect 以便它首先执行然后加载查询数据。
好的。您介意用codesandbox.io 或类似的方式指定您的代码吗
好像有多余的右括号

标签： react-native redux react-redux redux-thunk react-apollo

【解决方案1】：

需要明确的是，您不需要 react-apollo 来调用 GraphQL api 端点。

在您的情况下，您正在使用 2 个库来处理它自己的商店（假设您使用的是 Apollo Client 2）。 Redux 有它的 Redux Store，而 Apollo 使用 InMemoryCache 进行缓存。

您通过 graphql 获取的内容存储在 Apollo 缓存中，您可以使用 Apollo Client Developer Tools Chrome 扩展程序检查其内容。

如果你想将通过apollo-client 获取的数据返回到 Redux 存储，你必须手动调度一个操作来执行它（一旦data 从graphql 调用返回）。这大部分没有记录，因为不建议使用两种类型的Store。

如果您只需要调用 GraphQL 端点而不更改您的 Redux 实现。我建议改用apollo-fetch 或graphql-request。

【讨论】：