Question

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

我想使用查询参数调度一个动作，并在此动作中处理该查询，并将已解析的promise作为有效负载传递给相应的reducer。

我的方法如下;

我有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操作中访问客户端以传递查询参数？

Answer 1

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

处理异步请求的方式不正确。您应该使用redux-thunk或redux-saga来管理这些副作用。 reducer函数应该是同步的，只接收最终获取的数据。正如我在你的例子中看到的那样，reducer收到一个需要通过缺少的.then方法处理的promise。也许你正在使用中间件或什么？我建议您阅读有关redux-saga的更多信息并发送三项操作 - REQUEST，REQUEST_SUCCESSFUL和REQUEST_FAILURE。

从GraphQL的调度redux操作到达Apollo客户端

1 个答案: