如何解决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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。