Apollo 2を使用してGraphQLクエリのデータをフォームに事前入力する方法は？

Question

Apollo 2 GraphQLクエリからのデータを標準フォームフィールドに取り込むことができません。

他の人たちはどのようにこれに近づいていますか？以前はRelayを試して、コンポーネントコンストラクタでフォームフィールドの状態を設定するのに成功しました。アポロで

しかし、でも時間を検索し、ドキュメントのトンを読んだ後、私は暗闇の中でまだ午前...

小道具は、後の段階で設定されているような状態は常にnullを返しコンポーネントの初期化中。私はロードした後、それを設定しようとしましたが、それは...無限ループに、私は完全に失われています

私を取得します：/

これは私が今それが動作...が出ているものです。しかし、これはこの要件に近づくための推奨された方法ですか？

import React from 'react'; 

import { Route, Redirect, Switch } from "react-router-dom"; 

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

// SEMANTIC-UI REACT 
import { Container, Form, Button, Loader, Message } from "semantic-ui-react"; 


const MY_QUERY = gql` 
    query { 
    erp(id:"RXJwTm9kZToy") { 
     id 
     name 
     code 
    } 
    }`; 


class Test extends React.Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
    } 
    } 

    componentWillReceiveProps(newProps) { 
    if (newProps !== this.props) { 
     this.setState({ 
     erp_name: (newProps.data.erp || "").name, 
     erp_code: (newProps.data.erp || "").code 
     }); 
    } 
    } 

    render() { 
    if (this.props.data.loading) { 
     return <Loader active inline='centered' />; 
    } else if (this.props.data.error) { 
     return <Message error content={this.props.data.error.message} />; 
    } else { 
     return (
     <Form> 
      <ul> 
      <li key={this.props.data.erp.id}>{this.props.data.erp.name}</li> 
      </ul> 
      <Form.Input name="erp_name" label="ERP Name" placeholder="Name" value={this.state.erp_name} /> 
      <Form.Input name="erp_code" label="ERP Code" placeholder="Code" value={this.state.erp_code} /> 
      <Button type='submit'>Submit</Button> 
     </Form> 
    ); 
    } 
    } 
} 

export default graphql(MY_QUERY)(Test); 

Answer 1

これは反応しReduxFormと小さい例です。 これはおそらくあなたを助けるでしょう。

この例では、コンポーネントの初期化時にクエリが実行され、フォームに必要なデータが返されます。

私はそれがあなたを助けてくれることを願っています！

import PropTypes from 'prop-types' 
import React, { Component } from 'react' 
import { compose } from 'recompose' 
import { graphql, withApollo, gql } from 'react-apollo' 
import { Form } from 'redux-form' 

class MyExampleComponent extends Component { 
    render() { 
    const { userData } = this.props 

    return (
     <Form 
     initialValues={userData} 
     /> 
    ) 
    } 
} 

MyExampleComponent.propTypes = { 
    userData: PropTypes.object 
} 

const query = gql` 
    query getUser($userId: ID) { 
    user(id: $userId) { 
     age 
     firstName 
     lastName 
    } 
    } 
` 

export default compose(
    withApollo, 

    graphql(query, { 
    props: ({ data }) => ({ 
     isLoading: data.loading, 
     userData: data.user 
    }), 
    options: ({ params }) => ({ 
     variables: { id: params.id } 
    }) 
    }) 
)(MyExampleComponent)