从为 GraphQL 分派的 redux 操作中访问 Apollo 客户端答案

【问题标题】：Reaching Apollo client from dispatched redux actions for GraphQL从为 GraphQL 分派的 redux 操作中访问 Apollo 客户端
【发布时间】：2018-06-07 15:52:56
【问题描述】：

我正在尝试将 Apollo 集成到我的 react-app 中。

我想发送一个带有查询参数的操作，并在该操作中处理该查询，并将解析的 Promise 作为有效负载传递给相应的减速器。

我的方法如下；

我有一个client.js 文件

import { graphql } from 'react-apollo';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr' }),
  cache: new InMemoryCache()
});

export default client

然后我要从我的组件中分派以下操作。

import client from '../graphclient'

export function gQLFetch(query) {

  const data = client.query({query: query})

  return {
    type: "gQL_FETCH",
    payload: new Promise((resolve, reject) => {
      data.then(response => resolve(response)).catch(error => reject(error))
    })
  }
}

最后，我的 reducer 处理调度的动作并返回状态

const apiReducer = (state=[], action) => {
  switch (action.type) {
    case "gQL_FETCH_FULFILLED":
      state = action.payload.data.allMovies
      break;
  }
  return state;
}

export default apiReducer

这对我来说很好用。

但是，Apollo 的文档建议在 index.js 文件中定义 client 并在组件树顶部使用 <ApolloProvider> 标签和 client 属性将客户端传递给整个应用程序，如下所示；

ReactDOM.render(<ApolloProvider client={client}><Provider store={store}><App /></Provider></ApolloProvider>, document.getElementById('root'));

我的第一个问题：我的方法是一种好的做法吗？我觉得不是，因为<ApolloProvider> 提供了一种将客户端服务于整个应用程序的方法。

那么我的第二个问题来了：如何在我的 redux 操作中到达客户端以传递查询参数？

【问题讨论】：

标签： reactjs react-redux graphql apollo react-apollo

【解决方案1】：

ApolloProvider HoC 对我来说是有意义的，如果你想将数据直接填充/注入到组件中。如果您想拥有不同的数据管理，您可能会创建自己的客户端请求和数据获取机制。

您处理异步请求的方式不正确。您应该使用 redux-thunk 或 redux-saga 来管理此类副作用。 reducer 函数应该是同步的，并且只接收最终获取的数据。正如我在您的示例中看到的那样，reducer 收到了一个需要通过缺少的 .then 方法处理的承诺。也许您正在使用中间件或其他东西？我建议阅读有关 redux-saga 的更多信息并调度三个操作 - REQUEST、REQUEST_SUCCESSFUL 和 REQUEST_FAILURE。

【讨论】：

我使用redux-promise-middleware 来处理promise，因此reducer 的开关中的类型名称为gQL_FETCH_FULFILLED。可以吗？