如何使用GraphQL / Redux在reactJS中获取数据

时间:2019-01-07 14:16:01

标签: javascript graphql

我是graphQL的新手,最近被告知要学习它。 我想从我的一个查询中获取信息,并且我已经成功获取了有效负载以返回到我的auth文件中,但是我无法在其他文件之一中获取有效负载数据。

如何访问我的users.js文件中的getUsersForMyProviderAccount有效负载数据?如果您在componentDidMount内部查看,它将调用graphQL查询。

编辑:因此数据已经以redux状态存储。我需要做的就是用选择器获取它。但是当我尝试对其进行控制台记录时,它会返回一个函数。

export const selectUsersForProviderAccounts = () =>
  createSelector(selectDomain(), store => {
    return store.usersForProviderAccounts || {};
  });

enter image description here

auth.js文件

export function getUsersForMyProviderAccount(params) {
  const { provider = {} } = params;

  const query = `
    query {
      getUsersForMyProviderAccount(providerId: ${provider.id}) {
        id
        firstName
        lastName
        emailAddress
        userName
      }
    }
  `;

  return dispatch => {
    dispatch(fetchingProviderInProgress());

    return ApolloService.query({ query })
      .then(response => {
        const { getUsersForMyProviderAccount } = response.data;
        console.log(getUsersForMyProviderAccount);
        dispatch(
          getUsersForMyProviderAccountSuccess({
            payload: getUsersForMyProviderAccount,
            provider
          })
        );
        dispatch(resetAppMessages());
        console.log(getUsersForMyProviderAccount);
        return getUsersForMyProviderAccount;
      })
      .catch(error => {
        dispatch(getUsersForMyProviderAccountFailure());
        // Need to throw this error so that the callee (react component) can use this error in it's own catch block
        throw error;
      });
  };
}

user.js

componentDidMount() {
    const {
      getUsersForMyProviderAccount = () => {},
      getUser = () => {},
      providerAccount = {}
    } = this.props;
    this.props.form.validateFields((err, values) => {
      getUser({ providerId: providerAccount.id, ...values });
      getUsersForMyProviderAccount();
    });
  }

如何在users.js文件中导入和导出

导入

import {
  getUsersForMyProviderAccount,
  fetchUsers
} from "../../../stores/Provider/actions";

导出

const mapDispatchToProps = dispatch => ({
  getUsersForMyProviderAccount: () => dispatch(getUsersForMyProviderAccount())
});

const WrappedUsersList = Form.create()(UsersList);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(WrappedUsersList);

0 个答案:

没有答案