如何使用graphQL在React/Apollo中设置setState() [英] How to setState() in React/Apollo with graphQL

问题描述

我正在尝试将setState()设置为来自graphQL的查询结果，但是由于要始终加载它，或者仅从props使用，因此我很难找到如何执行此操作的方法. 我先设定状态

I am trying to setState() to a query result I have from graphQL, but I am having difficulty finding out how to do this because it will always be loading, or it's only used from props. I first set the state

constructor (props) {
        super(props);
        this.state = { data: [] };

然后我有这个查询

const AllParams = gql`
    query AllParamsQuery {
        params {
            id,
            param,
            input
        }
    }`

当它回来时，我可以使用this.props.AllParamsQuery.params

And when it comes back I can access it with this.props.AllParamsQuery.params

我应该如何以及何时 this.setState({ data: this.props.AllParamsQuery.params }) 不返回 {data: undefined} ?

我还没有找到让它在undefined又称为loading: true然后是setState的同时等待的方法.我尝试了componentDidMount()和componentWillReceiveProps()(包括async function(){...await...})，但未成功，我可能做错了.有人知道如何正确执行此操作或有示例吗?

I haven't found a way to make it wait while it's undefined AKA loading: true then setState. I've tried componentDidMount() and componentWillReceiveProps() including a async function(){...await...} but was unsuccessful, I am likely doing it wrong. Any one know how to do this correctly or have an example?

编辑+答案:您不应设置状态，而只能将其留在道具中.签出此链接:为什么要在react.js中将props设置为状态是亵渎神灵"

EDIT + Answer: you should not setstate and just leave it in props. Check out this link: "Why setting props as state in react.js is blasphemy" http://johnnyji.me/react/2015/06/26/why-setting-props-as-state-in-react-is-blasphemy.html There is more to the problem to update props, but some great examples can be found at this app creation tutorial: https://www.howtographql.com/react-apollo/8-subscriptions/

推荐答案

一个简单的解决方案是将您的Apollo查询组件和React有状态组件分开.来自Redux，使用mapStateToProps和componentWillReceiveProps将传入的props转换为本地组件状态并不罕见. 但是，这种模式与Apollo的<Query />杂乱无章.

A simple solution is to separate your Apollo query components and React stateful components. Coming from Redux, it's not unusual to transform incoming props for local component state using mapStateToProps and componentWillReceiveProps. However, this pattern gets messy with Apollo's <Query />.

因此，只需创建一个单独的组件即可获取数据:

So simply create a separate component which fetches data:

...

export class WidgetsContainer extends Component {
  render (
    <Query query={GET_WIDGETS}>
      {({ loading, error, data }) => {
        if (loading) return <Loader active inline="centered" />;

        const { widgets } = data;
        return (
          <Widgets widgets={widgets} />
        )
      }}
    </Query>
  )
}

现在Widgets组件现在可以正常使用setState了:

And now the Widgets components can now use setState as normal:

...
export class Widgets extends Component {
  ...
  constructor(props) {
    super()

    const { widgets } = props;
    this.state = {
      filteredWidgets: widgets
    };
  }

  filterWidget = e => {
    // some filtering logic
    this.setState({ filteredWidgets });
  }

  render() {
    const { filteredWidgets } = this.state;
    return (
      <div>
        <input type="text" onChange={this.filterWidgets} />
        {filteredWidgets.count}
      </div>
    )
  }
}

这篇关于如何使用graphQL在React/Apollo中设置setState()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！