如何从 redux 操作调用 apollo 客户端查询
How to call an apollo client query from a redux action
如果我在我的应用程序中使用 redux 和 apollo 客户端,从组件外部的操作触发查询的最佳方式是什么。
例如,如果我有一个标准应用程序,配置了 redux 和 apollo 客户端,我应该如何触发 "refresh" 列表。我可以在具有 gql 的组件本身上触发一个函数,但是我如何通过一个更符合 flux 的动作来实现它。
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 查询。
我看到了你的需求,因为我前几天刚到过你那里。
不幸的是:如果你想使用 graphQL
的动作,那么你不应该使用 apollo
,直接使用 graphQL
。这是一篇很好的文章,可以引导您完成 - getting started with Redux and GraphQL。为什么?因为 Apollo 使用一个名为 qraphql(query)
的函数调用它自己的操作。
Redux
和 Apollo
如何以非常简单的方式工作。
Redux:(用户调度一个动作)ActionCreator --> Action --> Middleware --> reducer --> store --> bind data to user props。我们手动控制每个状态。
Apollo: (User passes the query/mutation to graphql(query)
) all hidden (action --> store) then bind data to user props.
如果你正在使用 graphql
,你可以说 Apollo 取代了 Redux,因为它与 React 和 graphQL
.
有更好的集成
同时,由于 Apollo 仍在开发中,您可能需要 redux for redux-form 等。如果您习惯了一些 redux 库,您可能会考虑继续使用 Apollo 之外的 redux,您仍然可以绑定它们的存储并添加可能适用于两者的定制中间件,但您可能不会通过 Apollo 使用 Redux 操作获取数据.
我知道这感觉就像您正在失去 redux,但是您通过使用 Apollo 处理更多异步请求和缓存获得了所有优势。
如果您需要一个起点 react-redux-apollo。
我需要在 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
});
如果我在我的应用程序中使用 redux 和 apollo 客户端,从组件外部的操作触发查询的最佳方式是什么。
例如,如果我有一个标准应用程序,配置了 redux 和 apollo 客户端,我应该如何触发 "refresh" 列表。我可以在具有 gql 的组件本身上触发一个函数,但是我如何通过一个更符合 flux 的动作来实现它。
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 查询。
我看到了你的需求,因为我前几天刚到过你那里。
不幸的是:如果你想使用 graphQL
的动作,那么你不应该使用 apollo
,直接使用 graphQL
。这是一篇很好的文章,可以引导您完成 - getting started with Redux and GraphQL。为什么?因为 Apollo 使用一个名为 qraphql(query)
的函数调用它自己的操作。
Redux
和 Apollo
如何以非常简单的方式工作。
Redux:(用户调度一个动作)ActionCreator --> Action --> Middleware --> reducer --> store --> bind data to user props。我们手动控制每个状态。
Apollo: (User passes the query/mutation to
graphql(query)
) all hidden (action --> store) then bind data to user props.
如果你正在使用 graphql
,你可以说 Apollo 取代了 Redux,因为它与 React 和 graphQL
.
同时,由于 Apollo 仍在开发中,您可能需要 redux for redux-form 等。如果您习惯了一些 redux 库,您可能会考虑继续使用 Apollo 之外的 redux,您仍然可以绑定它们的存储并添加可能适用于两者的定制中间件,但您可能不会通过 Apollo 使用 Redux 操作获取数据.
我知道这感觉就像您正在失去 redux,但是您通过使用 Apollo 处理更多异步请求和缓存获得了所有优势。
如果您需要一个起点 react-redux-apollo。
我需要在 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
});