问题描述
我有一张桌子,上面放着我的通讯录。我使用 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,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;
解决方法
所以对我有用的是:
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 };
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;