Wie füllt man ein Formular mit Daten aus einer GraphQL-Abfrage mit Apollo 2?

Question

Ich habe Schwierigkeiten, die Daten von einer Apollo 2 GraphQL-Abfrage in reguläre Formularfelder zu bekommen.

Wie nähern sich andere dem? Zuvor versuchte Relay und es war erfolgreich, den Formularfeldstatus mit dem Komponentenkonstruktor festzulegen. jedoch

In Apollo, auch nach Stunden auf der Suche und Lese Tonnen Dokumentation Ich bin immer noch im Dunkel ...

Während der Initialisierung der Komponente der Zustand immer null zurück, wie die Requisiten zu einem späteren Zeitpunkt festgelegt werden . Ich habe versucht, es nach dem Laden zu setzen, aber das bringt mich in eine Endlosschleife ...

ich völlig verloren bin:/

Dies ist, was ich jetzt habe kommen mit ... es funktioniert. Aber ist dies der empfohlene Weg, diese Anforderung zu erfüllen?

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

Dies ist ein kleines Beispiel mit Reagieren und ReduxForm. Vielleicht wird dir das helfen.

In diesem Beispiel wird die Abfrage bei der Initialisierung der Komponente ausgeführt und gibt die zum Ausfüllen des Formulars erforderlichen Daten zurück.

Ich hoffe es hilft dir!

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)