我正在尝试将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
,并在组件树顶部使用带有 client
属性的 <ApolloProvider>
标记将客户端传递给整个应用程序,如此;
ReactDOM.render(<ApolloProvider client={client}><Provider store={store}><App /></Provider></ApolloProvider>, document.getElementById('root'));
My first question: 我的做法是一种好的做法吗?我觉得不是,因为 <ApolloProvider>
提供了一种为整个应用程序服务客户端的方法 .
Then my second question comes: 如何在我的redux操作中访问客户端以传递查询参数?
1 回答
ApolloProvider
如果你想直接在组件中填充/注入数据,对我来说是有意义的 . 如果您想拥有不同的数据管理,您可能会创建自己的客户端请求和数据获取机制 .处理异步请求的方式不正确 . 您应该使用redux-thunk或redux-saga来管理这些副作用 . reducer函数应该是同步的,只接收最终获取的数据 . 正如我在你的例子中看到的那样,reducer收到一个需要通过缺少的
.then
方法处理的promise . 也许你正在使用中间件或什么?我建议你阅读更多有关redux-saga的内容并发送三个动作 -REQUEST
,REQUEST_SUCCESSFUL
和REQUEST_FAILURE
.