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

问题描述

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

构造函数(道具){超级(道具)；this.state = { 数据:[] };

然后我有这个查询

const AllParams = gql`查询 AllParamsQuery {参数{ID，参数，输入}}`

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

访问它

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

我还没有找到一种方法让它在 undefined AKA loading: true 然后 setState 时等待.我试过 componentDidMount() 和 componentWillReceiveProps() 包括一个 async function(){...await...} 但没有成功，我可能做错了.有谁知道如何正确地做到这一点或有一个例子?

EDIT + Answer:您不应该设置状态而将其留在道具中.查看此链接:为什么在 react.js 中将 props 设置为 state 是亵渎"http://johnnyji.me/react/2015/06/26/why-setting-props-as-state-in-react-is-blasphemy.html更新道具的问题还有很多，但可以在此应用程序创建教程中找到一些很好的示例:https://www.howtographql.com/react-apollo/8-subscriptions/

解决方案

一个简单的解决方案是将 Apollo 查询组件和 React 有状态组件分开.来自 Redux，使用 mapStateToProps 和 componentWillReceiveProps 将传入的 props 转换为本地组件状态并不罕见.然而，这种模式在 Apollo 的 中变得混乱.

所以只需创建一个单独的组件来获取数据:

<代码>...导出类 WidgetsContainer 扩展组件 {使成为 (<查询查询={GET_WIDGETS}>{({ 加载，错误，数据 }) =>{if (loading) return <Loader active inline="centered"/>;const { 小部件 } = 数据；返回 (<小部件小部件={小部件}/>)}}</查询>)}

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

<代码>...导出类小部件扩展组件{...构造函数(道具){极好的()const { 小部件 } = 道具；this.state = {过滤小部件:小部件};}filterWidget = e =>{//一些过滤逻辑this.setState({filteredWidgets});}使成为() {const {filteredWidgets } = this.state;返回 (<div><input type="text" onChange={this.filterWidgets}/>{filteredWidgets.count}

)}}

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: [] };

Then I have this query

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

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

How and when should I this.setState({ data: this.props.AllParamsQuery.params }) without it returning {data: undefined}?

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?

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/

解决方案

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>
  )
}

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屋！