Question

以下React组件正常工作，我可以使用Apollo-React查询GraphQL端点。在这种特定情况下，我使用Apollo-React的compose函数在同一个组件中添加多个查询。我想在HOC variables字段中动态注入userId。有办法吗？因为仅调用函数getUser()似乎不起作用，所以我只能得到一个承诺。

  class AllCardsScreen extends Component {

    state = {
      query: '',
      userCardsById: [],
      userId:'',
      loading: false,
    };

    getUser = async () => {
    await Auth.currentUserInfo()
      .then((data) => {
        this.setState({ userId: data.attributes.sub});
      })
      .catch(error => console.log(`Error: ${error.message}`));
    };

  render() {

    return (
      <View style={styles.container}>
        <FlatList
          data={this.props.userCardsList}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          keyboardShouldPersistTaps="handled"
        />
      </View>
    );
  }


 export default compose(

  graphql(ListCards, {
    options: (props) => ({
      fetchPolicy: 'cache-and-network',
      variables: { userId : '18e946df-d3de-49a8-98b3-8b6d74dfd652'}
    }),        
    props: (props) => ({
         userCardsList: props.data.userCardsList ? props.data.userCardsList.userCards : [],

    }),
  })

  )(AllCardsScreen);

编辑：这也是基于Daniel建议（Thx Daniel）的最终工作版本，在HOC Apollo-graphQl增强器中注入了API异步调用。我必须调用data.props.refetch()函数来更新variables的值。

 class AuthWrapper extends React.Component {

    state = {
      userId: null,
    }

    async componentDidMount () {
      const data = await Auth.currentUserInfo()
      this.setState({ userId: data.attributes.sub})
    }

    render () {
      return this.state.userId
        ? <AllCardsScreen {...this.state} {...this.props}/>
        : null
    }
  }


class AllCardsScreen extends Component {

    state = {
      query: '',
      userCardsById: [],
      userId:'',
      loading: false,
    };

  componentDidMount() {
    this.props.dataRefetch(this.props.userId)
    SplashScreen.hide();
  }

  render() {

    return (
      <View style={styles.container}>
        <FlatList
          data={this.props.userCardsList}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          keyboardShouldPersistTaps="handled"
        />
      </View>
    );
  }


 export default compose(

  graphql(ListCards, {
    options: (props) => ({
      fetchPolicy: 'cache-and-network',
      variables: { userId : ''}
    }),        
    props: (props) => ({
    userCardsList: props.data.userCardsList ? props.data.userCardsList.userCards : [],
    dataRefetch: (userId) => {
        props.data.refetch({userId})
       },
    }),
  })

  )(AllCardsScreen);

Answer 1

graphql HOC仅使用道具-由于它实际上只是包装所传递的组件，因此无法访问该组件的状态。还没有办法在HOC的配置中异步获取数据。

最简单的解决方案是将状态提升到现有的父组件或将包装您现有组件的新组件中。例如：

class WrapperComponent extends Component {
  state = {
    userId: null,
  }

  async componentDidMount () {
    const data = await Auth.currentUserInfo()
    this.setState({ userId: data.attributes.sub})
  }

  render () {
    // May want to render nothing or a loading indicator if userId is null
    return <AllCardsScreen userId={this.state.userId} {...otherProps} />
  }
}

或者，您可以创建自己的HOC来封装相同的逻辑：

function authHOC(WrappedComponent) {
  return class AuthWrapper extends React.Component {
    state = {
      userId: null,
    }

    async componentDidMount () {
      const data = await Auth.currentUserInfo()
      this.setState({ userId: data.attributes.sub})
    }

    render () {
      return this.state.userId
        ? <WrappedComponent {...this.props} userId={this.state.userId} />
        : null
    }
  }
}

将组件状态传递给react-apollo的compose内部的查询变量

1 个答案: