如何将反应表单值传递给突变（变量）？

时间：2021-03-17 13:37:46

标签： arrays reactjs graphql apollo graphql-js

我有一张桌子，上面放着我的通讯录。我使用 Apollo 从 GQL 数据库中获取我的数据。我使用了这个例子 (https://developer.okta.com/blog/2018/10/11/build-simple-web-app-with-express-react-graphql) 并用我的数据修改了它。到目前为止，我可以看到条目并打开编辑/添加对话框并添加一个新条目，其键为“testcreate27”，名称为 Daniel。

这就是我在 PostEditor.js 中使用的代码：

import React from 'react';
import gql from 'graphql-tag';
import {
  Button,
  Form,
  FormGroup,
  Label,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'reactstrap';
import { Form as FinalForm, Field } from 'react-final-form';

import client from '../../../../apollo';
import { GET_POSTS } from './PostViewer';




const SUBMIT_POST = gql`
mutation {
  createInteressent(parentId: 1250, key: "testcreate27", published: true, input: {Name: "Daniel"}) {
    success
    message
    output(defaultLanguage: "de") {
      id
    }
  }
}

`;



const PostEditor = ({ node, onClose }) => (
  <FinalForm
    onSubmit={async ({ id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht }) => {
      const input = { id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht };

      await client.mutate({
        variables: { input },
        mutation: SUBMIT_POST,
        refetchQueries: () => [{ query: GET_POSTS }],
      });

      onClose();
    }}
    initialValues={node}
    render={({ handleSubmit, pristine, invalid }) => (
      <Modal isOpen toggle={onClose}>
        <Form onSubmit={handleSubmit}>
          <ModalHeader toggle={onClose}>
           {node.id ? 'Edit Post' : 'New Post'}
          </ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Name</Label>
              <Field
                required
                name="Name"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Vorname</Label>
              <Field
                required
                name="Vorname"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Quelle</Label>
              <Field
                required
                name="Quelle"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Artikel</Label>
              <Field
                required
                name="Artikel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Land</Label>
              <Field
                required
                name="Land"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Ort</Label>
              <Field
                required
                name="Ort"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Tel</Label>
              <Field
                required
                name="Tel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Mobil</Label>
              <Field
                required
                name="Mobil"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>EMail</Label>
              <Field
                required
                name="EMail"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Whatsapp</Label>
              <Field
                required
                name="Whatsapp"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Telegram</Label>
              <Field
                required
                name="Telegram"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Notizen</Label>
              <Field
                required
                name="Notizen"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Geschlecht</Label>
              <Field
                required
                name="Geschlecht"
                className="form-control"
                component="input"
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">Save</Button>
            <Button color="secondary" onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;

现在我有两个问题无法解决。

1：我想让我在 Input 表单中写的变量在 gql Mutation 中而不是“ input: {Name: "Daniel"} 并且我希望键是 Vorname + Nachname（英文） = firstname + Name) 而不是“testcreate27”

到目前为止我尝试过的：

1: 尝试我知道的所有方法将变量写入该字段。-> 主要是关于意外.} 等的错误......或错误预期类型字符串......

尝试将 SUBMIT_POST 分成 2 个部分并将我的变量放在它之间。-> 语法错误。

编辑：

这是我的工作查询的代码：

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { Table } from 'reactstrap';

export const GET_POSTS = gql`
query   {
  getInteressentListing {
    edges {
      node {
        id
        Name
        Vorname
        Quelle
        Artikel
        Land
        Ort
        Tel
        Mobil
        EMail
        Whatsapp
        Telegram
        Notizen
        Geschlecht
      }
    }
  }
}
`;


const rowStyles = (post, canEdit) => canEdit(post)
  ? { cursor: 'pointer', fontWeight: 'bold' }
  : {};

const PostViewer = ({ canEdit, onEdit }) => (
  <Query query={GET_POSTS}>
    {({ loading, data }) => !loading && (
      <Table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Quelle</th>
            <th>Artikel</th>
            <th>Land</th>
            <th>Ort</th>
            <th>Tel.</th>
            <th>Mobil</th>
            <th>E-Mail</th>
            <th>Whatsapp</th>
            <th>Telegram</th>
            <th>Notizen</th>
            <th>Geschlecht</th>
          </tr>
        </thead>
        <tbody>
          {data.getInteressentListing.edges.map(({node}) => (
            <tr
              key={node.id}
              style={rowStyles(node, canEdit)}
              onClick={() => canEdit(node) && onEdit(node)}
            >
    <td> {node.Name} </td>
    <td> {node.Vorname} </td>
    <td> {node.Quelle} </td>
    <td> {node.Artikel} </td>
    <td> {node.Land} </td>
    <td> {node.Ort} </td>
    <td> {node.Tel} </td>
    <td> {node.Mobil} </td>
    <td> {node.EMail} </td>
    <td> {node.Whatsapp} </td>
    <td> {node.Telegram} </td>
    <td> {node.Notizen} </td>
    <td> {node.Geschlecht} </td>
             
            </tr>
          ))}
        </tbody>
      </Table>
    )}
  </Query>
);
PostViewer.defaultProps = {
  canEdit: () => true,
  onEdit: () => null,
};

export default PostViewer;

1 个答案:

答案 0 :(得分：0)

所以对我有用的是：

import React from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/client';
import {
  Button,
  Form,
  FormGroup,
  Label,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'reactstrap';
import { Form as FinalForm, Field } from 'react-final-form';

import client from '../../../../apollo';
import { GET_POSTS } from './PostViewer';




const SUBMIT_POST = gql`
mutation (
$key: String!, 
$Namegql: String!,
$Vornamegql: String!,
$Quellegql: String,
$Artikelgql: String,
$Landgql: String,
$Ortgql: String,
$telgql: String,
$Mobilgql: String,
$EMailgql: String,
$Whatsappgql: Boolean,
$Telegramgql: Boolean,
$Notizengql: String,
$Geschlechtgql: String,
){
  createInteressent(parentId: 1266, key: $key, published: true, input: {
Name: $Namegql,
Vorname: $Vornamegql,
Quelle: $Quellegql,
Artikel: $Artikelgql,
Land: $Landgql,
Ort: $Ortgql,
Tel: $telgql,
Mobil: $Mobilgql,
EMail: $EMailgql,
Whatsapp: $Whatsappgql,
Telegram: $Telegramgql,
Notizen: $Notizengql,
Geschlecht: $Geschlechtgql,
}) {
    success
    message
    output(defaultLanguage: "de") {
      id
    }
  }
}
`;




const PostEditor = ({ node, onClose }) => (
  <FinalForm
    onSubmit={async ({ id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht }) => {
      const input = { id, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, Geschlecht };
    const key = Vorname + Name;
    const Namegql = Name;
    const Vornamegql = Vorname;
    const Quellegql = Quelle;
    const Artikelgql = Artikel;
    const Landgql = Land;
    const Ortgql = Ort;
    const Telgql = Tel;
    const Mobilgql = Mobil;
    const EMailgql = EMail;
    const Whatsappgql = Whatsapp;
    const Telegramgql = Telegram;
    const Notizengql = Notizen;
    const Geschlechtgql = Geschlecht;
        await client.mutate({
        variables: { 
input, 
key, 
Namegql, 
Vornamegql, 
Quellegql, 
Artikelgql, 
Landgql, 
Ortgql, 
Telgql, 
Mobilgql, 
EMailgql, 
Whatsappgql, 
Telegramgql, 
Notizengql, 
Geschlechtgql
},
        mutation: SUBMIT_POST,
        refetchQueries: () => [{ query: GET_POSTS }],
});

      onClose();
    }}
    initialValues={node}
    render={({ handleSubmit, pristine, invalid }) => (
      <Modal isOpen toggle={onClose}>
        <Form onSubmit={handleSubmit}>
          <ModalHeader toggle={onClose}>
           {node.id ? 'Edit Post' : 'New Post'}
          </ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Name</Label>
              <Field
                required
                name="Name"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Vorname</Label>
              <Field
                required
                name="Vorname"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Quelle</Label>
              <Field

                name="Quelle"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Artikel</Label>
              <Field
                
                name="Artikel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Land</Label>
              <Field
   
                name="Land"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Ort</Label>
              <Field

                name="Ort"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Tel</Label>
              <Field
          
                name="Tel"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Mobil</Label>
              <Field
             
                name="Mobil"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>EMail</Label>
              <Field

                name="EMail"
                className="form-control"
                component="input"
              />
            </FormGroup>
            <FormGroup>
              <Label>Whatsapp</Label>
              <Field
         
                name="Whatsapp"
                className="form-control"
                component="input"
        type="checkbox"
              />
            </FormGroup>
            <FormGroup>
              <Label>Telegram</Label>
              <Field
         
                name="Telegram"
                className="form-control"
                component="input"
        type="checkbox"
              />
            </FormGroup>
            <FormGroup>
              <Label>Notizen</Label>
              <Field
        
                name="Notizen"
                className="form-control"
                component="textarea"
              />
            </FormGroup>
            <FormGroup>
              <Label>Geschlecht</Label>
              <div>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Männlich"
                />{' '}
                Männlich
              </label>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Weiblich"
                />{' '}
                Weiblich
              </label>
              <label>
                <Field
                  name="Geschlecht"
                  component="input"
                  type="radio"
                  value="Divers"
                />{' '}
                Divers
              </label>
            </div>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">Save</Button>
            <Button color="secondary" onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;
相关问题
最新问题