如何从REDX操作调用阿波罗客户端查询
如果我在应用程序中使用REDX和APOLLO客户端,从组件外的操作触发查询的最佳方式是什么?如何从REDX操作调用阿波罗客户端查询
例如,如果我有一个标准的应用程序,配置了redux和apollo客户端,我应该如何触发一个“刷新”列表。我可以在组件本身上触发一个具有gql的函数,但是如何从一个更符合流量的操作中执行此操作。
import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { connect } from 'react-redux';
import { refreshProfile } from './actions';
class Profile extends Component { ... }
Profile.propTypes = {
data: PropTypes.shape({
loading: PropTypes.bool.isRequired,
user: PropTypes.object,
}).isRequired,
};
const UserQuery = gql`
query getUser {
user {
id
name
}
}
`;
const ProfileWithData = graphql(UserQuery)(Profile);
const ProfileWithDataAndState = connect(
(state) => ({ user: state.user })),
)(ProfileWithData);
而且,我想触发一个动作来刷新用户数据?由于逻辑在组件本身中,所以我不确定如何从动作本身触发该gql查询。
我需要在我的actions.js中使用ApolloClient。例如
import ApolloClient, { createNetworkInterface } from 'apollo-client';
const networkInterface = createNetworkInterface({
uri: config.graphCoolUri,
});
const client = new ApolloClient({
networkInterface,
dataIdFromObject: r => r.id,
});
const { data } = await client.query({
query: UserQuery
});
我明白你的需求,因为我几天前就在你的位置。
可悲的消息是:如果你想使用graphQL
的动作,那么你不应该使用apollo
,直接使用graphQL
即可。这是一篇很好的文章,可以帮助您完成 - getting started with Redux and GraphQL。为什么?因为Apollo使用了一个名为qraphql(query)
的函数,它调用了它自己的操作。
Redux
和Apollo
如何以非常简单的方式工作。
终极版:(用户调度一个动作)ActionCreator - >操作 - >中间件 - >减速器 - >商店 - >将数据绑定到用户的道具。我们手动控制每个状态。 Apollo :(用户将查询/变异传递给
graphql(query)
)所有隐藏的(动作 - >存储)然后将数据绑定到用户道具。
可以说,阿波罗取代终极版,如果你使用的是graphql
,因为它有反应,graphQL
一个更好的整合。
与此同时,由于Apollo仍在开发中,您可能需要redux for redux-form等。如果你习惯了一些redux库,你可能会考虑继续使用除了Apollo之外的redux,你仍然可以绑定它们的商店并添加可能适用于这两者的服装中间件,但是你可能不会使用通过Apollo的Redux操作获取数据。
我知道你觉得你失去了redux,但你有更多的异步请求和缓存照顾与阿波罗的优势。
如果你需要一个地方开始react-redux-apollo。
你有没有办法做到这一点? –
是的,你可以直接使用apollo客户端,就像我在示例代码中的答案。 – MonkeyBonkey
并从其他组件? 'withApollo'? –