GraphQL 编辑条目添加新条目
Posted
技术标签:
【中文标题】GraphQL 编辑条目添加新条目【英文标题】：GraphQL Editing Entry adds new Entry 【发布时间】：2021-06-15 15:25:50 【问题描述】：我仍在处理我的通讯录。我能够让它像我想要的那样工作。但是，如果我编辑条目，它会创建一个新条目。
我的数据库希望每个条目都有一个“密钥”。正如您将在我的代码中看到的那样，我使用“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, Name, Vorname, Quelle, Artikel, Land, Ort, Tel, Mobil, EMail, Whatsapp, Telegram, Notizen, 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;
【问题讨论】：
变异名称是'createInteressent'，为什么它应该作为更新工作？重命名变量只是为了将它们作为变量传递是......一个笑话;） 【参考方案1】：感谢@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,
Name,
idgql,
Vorname,
Quelle,
Artikel,
Land,
Ort,
Tel,
Mobil,
EMail,
URL,
Whatsapp,
Telegram,
Notizen,
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;
【讨论】：
还有很多代码......这些突变的input 参数的 [API 文档] 类型是什么？
@xadm 你是什么意思？我应该将输入变量放入数组中吗？
您已经有一个输入对象 - 输入类型（如 graphql.org/learn/schema/#input-types 中的评论）用于对名为 input 的字段进行分组 - 从 API 文档/规范中读取其类型
@xadm 您的意思是输入类型是从原始代码中留下的。实际上我没有让它工作，所以我的代码是解决方法。原始代码：developer.okta.com/blog/2018/10/11/…
API/BE - 你有游乐场吗？服务器类型，updateInteressentmutation defs/specs - 参数类型？以上是关于GraphQL 编辑条目添加新条目的主要内容，如果未能解决你的问题，请参考以下文章