0

Всем привет, есть мутация для вывода информации с использованием Apollo + React + GraspQL.

Вот такой код у меня для Квери:

<Query
      query = {AllProduct_Artikel}
      variables = {{id: this.props.intern}}
      fetchPolicy = 'network-only'
      >
      {
        ({ loading, error, data, refetch, networkStatus}) => {
          if (networkStatus === 4) return "Refetching...";
          if (loading) return "Please await";
          if (error) return `Error: ${error}`;
          let values = data.allProduct_Artikel[0]
          return (
            <Row style={{padding: "10px 15px 0 15px"}}>
             <Col lg={4}>
              <Dropdown
                text="Bruch"
                style={{zIndex: 9, width: '100%'}}
                list={[1,2,3]}
                gruppeid={1}
                onBlur={this.isFunc}
                addDropDown={this.isFunc}/>
              <Input
                text="Verwendete Teile des Bruchs Fur Dliesen Artikle"
                type="number"
                onChange={this.getValueOfInput}
                onBlur={this.getValueOfInputBlur}
                name="BruchVerwendeteTeile"
                value={values.BruchVerwendeteTeile}
                className='input_bruch_article'/>
              <Col onClick={this.changeValueOnCheckbox}>
                <CheckBox
                  id="IsBruchTitel"
                  top="15px"
                  onClick={this.changeValueOnCheckbox}
                  tabIndex="99"
                  open={values.IsBruchTitel}
                  value={'Bruch-Artikel'}/>
              </Col>
             </Col>
            </Row>
          )

        }
      }
    </Query>

Как в него вставить мутацию для инпута и чекбокса. Ранее делал вот так:

updateProductArticle = (values) => {
  const {updateProductArticle, intern} = this.props;
  updateProductArticle({
    variables: {
      id: intern,
      ...values
    },
    options: {
      fetchPolicy: 'network-only'
    }
  })
}

Спасибо =)

1 ответ 1

0

Проблему решил, если кому пригодиться - вот так (даю весь код компонента), если кто может что поправить, буду рад)

import React, { Component } from 'react';
import {Col, Row} from 'react-bootstrap';
import { graphql, compose, Query, Mutation } from 'react-apollo';

import Input from'../../../../../../@appElements/input/Input.js'
import Title from'../../../../../../@appElements/title/Title.js'
import CheckBox from '../../../../../../@appElements/checkBox/CheckBox.js';
import Dropdown from '../../../../../../@appElements/dropDown/Dropdown'

import AllProduct_Artikel from '../../../../../../functions/query/product/allProduct_Artikel.js'
import updateProductArticle from '../../../../../../functions/mutation/product/updateProductArticle.js'

class Bruch extends Component {
 constructor() {
    super();
    this.state = {
     BruchSummierenAuf:'',
     BruchVerwendeteTeile: '',
     IsBruchTitel: '',
     dataS: ''
    }
  }

	getValueOfInput = (e) => {
		const key = e.target.name;
	  const value = e.target.value;
	  this.setState({[key]: value});
	}

  onCompleted = (data) => {
    let info = data.allProduct_Artikel[0]
    this.setState({
      BruchVerwendeteTeile: info.BruchVerwendeteTeile,
      IsBruchTitel: info.IsBruchTitel
    })
  }

  update = (methode, e) => {
    const {name} = e.target;
    e.preventDefault();
    methode({
      variables: {
        id: this.props.intern,
        [name]: this.state[name]
      }
    })
  }

  updateCheckBox = (methode, e) => {
    const name = e.target.id;
    e.preventDefault();
    this.setState({
      [name]: !this.state[name]
    })
    methode({
      variables: {
        id: this.props.intern,
        [name]: !this.state[name]
      }
    })
  }


 render() {
   console.log(this.state);
   console.log(this.props);
  return (
    <Query
      query = {AllProduct_Artikel}
      variables = {{id: this.props.intern}}
      fetchPolicy = 'network-only'
      onCompleted = {this.onCompleted}
      >
      {
        ({ loading, error, data, refetch, networkStatus}) => {
          if (networkStatus === 4) return "Refetching...";
          if (loading) return "Please await";
          if (error) return `Error: ${error}`;
          let values = data.allProduct_Artikel[0];
          console.log(data);
          return (
            <Row style={{padding: "10px 15px 0 15px"}}>
             <Col lg={4}>
               <Dropdown
                 text="Bruch"
                 style={{zIndex: 9, width: '100%'}}
                 list={[1,2,3]}
                 gruppeid={1}
                 onBlur={this.isFunc}
                 addDropDown={this.isFunc}/>
               <Mutation mutation={updateProductArticle}>
                 {updateArticle => (
                   <div>
                   <Input
                     text="Verwendete Teile des Bruchs Fur Dliesen Artikle"
                     type="number"
                     onChange={this.getValueOfInput}
                     onBlur = {this.update.bind(this, updateArticle)}
                     name={"BruchVerwendeteTeile"}
                     value={this.state.BruchVerwendeteTeile}
                     className='input_bruch_article'/>

                   <Col onClick={this.updateCheckBox.bind(this, updateArticle)}>
                     <CheckBox
                       id={"IsBruchTitel"}
                       top="15px"
                       tabIndex="99"
                       open={this.state.IsBruchTitel}
                       value={'Bruch-Artikel'}/>
                   </Col>
                 </div>
                 )}
                 </Mutation>
             </Col>
            </Row>
          )
        }
      }
    </Query>
   )
 }
}

export default Bruch;

// if(this.props.AllProduct_Artikel.loading){return null}
// if(this.props.AllProduct_Artikel.error){return this.props.AllProduct_Artikel.refetch()}
//
//
// <Row style={{padding: "10px 15px 0 15px"}}>
//  <Col lg={4}>
//   <Dropdown
//     text="Bruch"
//     style={{zIndex: 9, width: '100%'}}
//     list={[1,2,3]}
//     gruppeid={1}
//     onBlur={this.isFunc}
//     addDropDown={this.isFunc}/>
//   <Input
//     text="Verwendete Teile des Bruchs Fur Dliesen Artikle"
//     type="number"
//     onChange={this.getValueOfInput}
//     onBlur={this.getValueOfInputBlur}
//     name="BruchVerwendeteTeile"
//     value={this.state.BruchVerwendeteTeile}
//     className='input_bruch_article'/>
//   <Col onClick={this.changeValueOnCheckbox}>
//     <CheckBox
//       id="IsBruchTitel"
//       top="15px"
//       onClick={this.changeValueOnCheckbox}
//       tabIndex="99"
//       open={this.state.IsBruchTitel}
//       value={'Bruch-Artikel'}/>
//   </Col>
//  </Col>
// </Row>
//
//
// const graph = compose(
//    graphql(AllProduct_Artikel, {
//     options: (props) => ({
//       fetchPolicy: 'network-only',
//         variables: {
//           id: props.intern,
//         }
//       }),
//     name: "AllProduct_Artikel",
//   }),
// 	graphql(updateProductArticle, {name: "updateProductArticle"}),
// )(Bruch);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.