Apollo 2를 사용하여 GraphQL 쿼리의 데이터로 양식을 미리 채우는 방법은 무엇입니까?

Question

아폴로 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)