Question

我正在尝试将setState（）设置为来自graphQL的查询结果，但是我很难找到如何执行此操作，因为它将始终加载，或者它仅用于来自props。我首先设置状态

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

然后我有了这个查询

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

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

访问它

我应该如何以及何时 this.setState({ data: this.props.AllParamsQuery.params }) 不退货 {data: undefined} ？

我还没有办法让它等待undefined AKA loading: true然后setState。我已尝试componentDidMount()和componentWillReceiveProps()包括async function(){...await...}，但未成功，我可能做错了。任何人都知道如何正确地做这个或有一个例子？

编辑+答案：您不应该设置状态，只需将其保留在道具中即可。看看这个链接：“为什么在react.js中将道具设置为状态是亵渎神灵”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/

Answer 1

一个简单的解决方案是将您的Apollo查询组件和React状态组件分开。来自Redux，使用Select count(PatientID), DatePart('ww',DateofC) from Patient Where DateDiff('day',DateofC,Date()) Group by DateofC和mapStateToProps将传入的props转换为本地组件状态并不少见。但是，这种模式与Apollo的componentWillReceiveProps杂乱无章。

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

<Query />

现在... 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

Answer 2

将其设置为州的原因是什么？请记住，Apollo Client使用内部redux存储来管理查询。如果您尝试根据查询中的某些更改触发重新渲染，则应使用refetchQueries（）。如果你绝对需要将它存储在本地状态，我认为你可以比较componentWillReceiveProps中的nextProps以检测何时加载（当你从apollo客户端执行查询时返回的值）已经改变，然后更新你的状态。

Answer 3

我有一个类似的问题（虽然它发生的原因完全不同）。我的状态一直未定义。我能用React中间件解决它。它可以很容易地避免这个问题。我最终使用了superagent。

http://www.sohamkamani.com/blog/2016/06/05/redux-apis/

如何使用graphQL

3 个答案: