GraphQL Editing Entry 添加了新的 Entry

问题描述

我仍在处理我的通讯录。我能够让它像我想要的那样工作。但如果我编辑条目，它会创建一个新条目。

我的数据库希望每个条目都有一个“密钥”。正如您将在我的代码中看到的，我使用“Vorname + Nachname + n (DateandTime)”创建了这个键。

我添加了 DateandTime 以避免在添加具有相同名称（相同键）的第二个人时出错。如果我添加具有相同密钥的条目，则会出现错误）。如果我将密钥留空，我也会收到错误消息。

但是使用此代码，如果我尝试编辑一个人，它总是会添加一个人。我怎样才能避免这种情况？

提前感谢您的回答

代码：

    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,Geschlecht };
    var d = new Date();
    var n = d.toLocaleString();
    const key = Vorname + Name + n;
    
    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 ? 'Eintrag bearbeiten' : 'Neuer Eintrag'}
          </ModalHeader>
          <ModalBody>
     <div>
            <label>Name</label>
            <Field
        required
              name="Name"
              component="input"
              type="text"
              placeholder="Vorname"
            />
          </div>
          <div>
            <label>Vorname</label>
            <Field
              name="Vorname"
              component="input"
              type="text"
              placeholder="Vorname"
            />
          </div>
            <div>
              <Label>Quelle</Label>
              <Field
                name="Quelle"
                component="input"
              type="text"
              placeholder="Quelle"
              />
            </div>
            <div>
              <Label>Artikel</Label>
              <Field                
                name="Artikel"
                component="input"
              type="text"
              placeholder="Artikel"
              />
            </div>
            <div>
              <Label>Land</Label>
              <Field   
                name="Land"
                component="input"
              type="text"
              placeholder="Land"
              />
            </div>
            <div>
              <Label>Ort</Label>
              <Field
                name="Ort"
                component="input"
              type="text"
              placeholder="Ort"
              />
            </div>
            <div>
              <Label>Tel.</Label>
              <Field          
                name="Tel"
                component="input"
              type="text"
              placeholder="Tel."
              />
            </div>
            <div>
              <Label>Mobil</Label>
              <Field           
                name="Mobil"
                component="input"
              type="text"
              placeholder="Mobil"
              />
            </div>
            <div>
              <Label>E-Mail</Label>
              <Field
                name="EMail"
                component="input"
              type="text"
              placeholder="E-Mail"
              />
            </div>
            <div>
              <Label>Whatsapp</Label>
              <Field
                name="Whatsapp"
                component="input"
        type="checkBox"
              />
            </div>
            <div>
              <Label>Telegram</Label>
              <Field         
                name="Telegram"
                component="input"
        type="checkBox"
              />
            </div>
            <div>
              <Label>Notizen</Label>
              <Field        
                name="Notizen"
                className="form-control"
                component="textarea"
              />
            </div>
            <div>
              <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>
            </div>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">Speichern</Button>
            <Button color="secondary" onClick={onClose}>Cancel</Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;

解决方法

感谢@xadm，我找到了一个解决方案并清理了我的代码:) -> 重命名变量 :D 现在一切正常。

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 UPDATE_ENTRY = 
gql`
  mutation(
   
    $idgql: Int!
    $Name: String
    $Vorname: String
    $Quelle: String
    $Artikel: String
    $Land: String
    $Ort: String
    $Tel: String
    $Mobil: String
    $EMail: String
    $URL: String
    $Whatsapp: Boolean
    $Telegram: Boolean
    $Notizen: String
    $Geschlecht: String
  ) {
    updateInteressent(
      id: $idgql
      input: {
        Name: $Name
        Vorname: $Vorname
        Quelle: $Quelle
        Artikel: $Artikel
        Land: $Land
        Ort: $Ort
        Tel: $Tel
        Mobil: $Mobil
        EMail: $EMail
        URL: $URL
        Whatsapp: $Whatsapp
        Telegram: $Telegram
        Notizen: $Notizen
        Geschlecht: $Geschlecht
      }
    ) {
      success
      message
      output(defaultLanguage: "de") {
        id
      }
    }
  }
`;

const NEW_ENTRY = gql`
 mutation (
$key: String!,$Name: String,$Vorname: String,$Quelle: String,$Artikel: String,$Land: String,$Ort: String,$Tel: String,$Mobil: String,$EMail: String,$Whatsapp: Boolean,$Telegram: Boolean,$Notizen: String,$Geschlecht: String,){
  createInteressent(parentId: 1266,key: $key,published: true,input: {
Name: $Name,Vorname: $Vorname,Quelle: $Quelle,Artikel: $Artikel,Land: $Land,Ort: $Ort,Tel: $Tel,Mobil: $Mobil,EMail: $EMail,Whatsapp: $Whatsapp,Telegram: $Telegram,Notizen: $Notizen,Geschlecht: $Geschlecht,}) {
    success
    message
    output(defaultLanguage: "de") {
      id
    }
  }
}
`;


const PostEditor = ({ node,onClose }) => (
    
  <FinalForm
    onSubmit={async ({
      id,Name,Vorname,Quelle,Artikel,Land,Ort,Tel,Mobil,EMail,URL,Whatsapp,Telegram,Notizen,Geschlecht
    }) => {
      var d = new Date();
      var n = d.toLocaleString();
      const key = Vorname + Name + n;
      const idgql = node.id;
      const ENTRY = (node.id ? UPDATE_ENTRY : NEW_ENTRY);
      await client.mutate({
        variables: {
          key,idgql,Geschlecht,},mutation: ENTRY,refetchQueries: () => [{ query: GET_POSTS }]
      });

      onClose();
    }}
    initialValues={node}
    render={({ handleSubmit,pristine,invalid }) => (
      <Modal isOpen toggle={onClose}>
        <Form onSubmit={handleSubmit}>
          <ModalHeader toggle={onClose}>
            {node.id ? "Eintrag bearbeiten" : "Neuer Eintrag"}

          </ModalHeader>
          <ModalBody>
            <div>
              <label>Name</label>
              <Field
                required
                name="Name"
                component="input"
                type="text"
                placeholder="Vorname"
              />
            </div>
            <div>
              <label>Vorname</label>
              <Field
                name="Vorname"
                component="input"
                type="text"
                placeholder="Vorname"
              />
            </div>
            <div>
              <Label>Quelle</Label>
              <Field name="Quelle" component="select">
                <option />
                <option value="eBay-Kleinanzeigen">eBay-Kleinanzeigen</option>
                <option value="Facebook">Facebook</option>
                <option value="Twitter">Twitter</option>
                <option value="Instagram">Instagram</option>
                <option value="Mundpropaganda">Mundpropaganda</option>
                <option value="Sonstiges">Sonstiges (siehe Notizen)</option>
              </Field>
            </div>
            <div>
              <Label>Artikel</Label>
              <Field
                name="Artikel"
                component="input"
                type="text"
                placeholder="Artikel"
              />
            </div>
            <div>
              <Label>Land</Label>
              <Field
                name="Land"
                component="input"
                type="text"
                placeholder="Land"
              />
            </div>
            <div>
              <Label>Ort</Label>
              <Field
                name="Ort"
                component="input"
                type="text"
                placeholder="Ort"
              />
            </div>
            <div>
              <Label>Tel.</Label>
              <Field
                name="Tel"
                component="input"
                type="text"
                placeholder="Tel."
              />
            </div>
            <div>
              <Label>Mobil</Label>
              <Field
                name="Mobil"
                component="input"
                type="text"
                placeholder="Mobil"
              />
            </div>
            <div>
              <Label>E-Mail</Label>
              <Field
                name="EMail"
                component="input"
                type="text"
                placeholder="E-Mail"
              />
            </div>
            <div>
              <Label>URL</Label>
              <Field
                name="URL"
                component="input"
                type="text"
                placeholder="URL"
              />
            </div>
            <div>
              <Label>Whatsapp</Label>
              <Field name="Whatsapp" component="input" type="checkbox" />
            </div>
            <div>
              <Label>Telegram</Label>
              <Field name="Telegram" component="input" type="checkbox" />
            </div>
            <div>
              <Label>Notizen</Label>
              <Field
                name="Notizen"
                className="form-control"
                component="textarea"
              />
            </div>
            <div>
              <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>
            </div>
          </ModalBody>
          <ModalFooter>
            <Button type="submit" disabled={pristine} color="primary">
              Speichern
            </Button>
            <Button color="secondary" onClick={onClose}>
              Cancel
            </Button>
          </ModalFooter>
        </Form>
      </Modal>
    )}
  />
);

export default PostEditor;