如何将反应形式的值传递给突变（变量）？
Posted
技术标签:
【中文标题】如何将反应形式的值传递给突变（变量）？【英文标题】：How to pass a react form values into mutation (variables)? 【发布时间】：2021-06-14 20:39:24 【问题描述】：我有一张桌子，上面放着我的通讯录。我使用 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：我想让我在输入表单中写入的变量出现在 gql Mutation 而不是“input: Name: "Daniel"”中，并且我希望键是 Vorname + Nachname（英文= firstname + Name) 而不是“testcreate27”
到目前为止我尝试了什么：
1：尝试我知道的每种方法将变量写入该字段。-> 主要是关于意外的错误。等.....或错误预期类型字符串...
尝试将 SUBMIT_POST 分成两部分并将我的变量放在它们之间。-> 语法错误。
编辑：
这是我工作查询的代码：
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;
【问题讨论】：
graphql.org/learn/queries/#variables ... 变量 shape/entries/props 必须与定义的 $varsNames 匹配，不允许额外包装到input 级别...当然，首先在操场上测试
因此，例如使用 $key 一开始不会引发错误。但是在哪里定义这个变量的正确位置以及我如何正确定义它。
阅读所有提供的文档...解释清楚...使用游乐场进行实验
在提供的文档中它说“传递变量名：在单独的、特定于传输的（通常是 JSON）变量字典中的值”但是我如何在我的反应应用程序中使用它
我试图像 const key = input.Name 一样使用它
【参考方案1】：
所以对我来说，结果是：
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;
【讨论】：
以上是关于如何将反应形式的值传递给突变（变量）？的主要内容，如果未能解决你的问题，请参考以下文章