Question

我正在使用Apollo Client 2和React。查询加载完成后是否有回调？

我正在制作用户的帐户页面。电子邮件字段应显示用户电子邮件。我可以使用graphQL查询获取此值，但加载仅在组件已安装后才能完成。因此我不能使用componentDidMount。是否有回调或事件我用于setState并以这种方式填充电子邮件字段？

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

class AccountPage extends React.Component {
  render() {
    if (this.props.data.loading) return <p>Loading...</p>;
    return(
    <form>
      <input type="email" />
    </form>
    )
  }
}

const UserQuery = gql`
    query UserQuery {
        user {
            _id
            email
        }
    }
`;

export default graphql(UserQuery)(AccountPage);

Answer 1

使用recompose：＃/ p>可以轻松解决这个问题

const LoadingComponent = () => <p>Loading...</p>

compose(
  // with compose, order matters -- we want our apollo HOC up top
  // so that the HOCs below it will have access to the data prop
  graphql(UserQuery),
  branch(
    ({ data }) => {
      return !data.user && data.loading
    },
    renderComponent(LoadingComponent)
  ),
  // BONUS: You can define componentDidMount like normal, or you can use
  // lifecycle HOC and make AccountPage a functional component :)
  lifecycle({
    componentDidMount() {
    // set your state here
    },
  }),
)(AccountPage)

branch会有条件地呈现您传递给它的任何组件而不是包装组件。在这种情况下，包装组件是组合内部分支下面的所有内容。这意味着AccountPage在data.loading为false并且data.user无效之前不会挂载cnx = mysql.connector.connect(user='user', password='password', host='localhost', database='db', port=8888)，这样我们就可以使用componentDidMount根据查询结果设置状态。

从Apollo Client + React加载完成时的回调？

1 个答案: