javascript - 使用不同的参数运行一个突变
问题描述
在下面的组件中,用户可以输入结果。这里每个结果都是数据库中“RESULT”表的单独行。我有一个突变,它将更新个人结果。在这里,当用户单击保存按钮时,将保存所有结果。为此,需要为每个结果使用不同的参数调用 UPDATE_RESULT 突变。
任何人都可以建议我如何做到这一点?
如果您有任何不同的方法来实现此功能,也请分享。
解析器
const updateResult = async (_, {number, input: { entry, entered_by, status, old_status, result_modified, in_spec, cancelled, optional }}, {user, prisma}) => {
if(!user){
throw new Error('Not Authenticated')
}
const updatedResult = await prisma.updateResult({
data: {
entry,
entered_by,
entered_on,
status,
old_status,
result_modified,
in_spec,
cancelled,
optional
},
where: {
number
}
})
return updatedResult
}
零件
import React, { Suspense, useState, Fragment, useEffect } from 'react';
import ErrorBoundary from '../ErrorBoundary';
import { useMutation } from 'react-apollo';
import gql from 'graphql-tag'
const UPDATE_RESULT = gql`
mutation updateResult($number: Int!, $input: updateResultInput){
updateResult(number: $number, input: $input){
number
name
}
}
`
export default function ResultDetails({results}){
const [entry, setEntry] = useState({});
const [inSpec, setInSpec] = useState({});
const [mutation, { loading, error }] = useMutation(UPDATE_RESULT)
const isInSpec = (val, max_val, min_val) => {
if(val >= min_val && val<= max_val) return true;
return false;
}
const saveResults = () => {
for(let res in entry){
console.log(entry[res], entry)
}
// run mutation 'update result' to save all the entered results
}
useEffect(() => {
results.map(result => {
let spec = isInSpec(parseInt(entry[result.name]), result.max_val, result.min_val);
setInSpec({...inSpec, [result.name]: spec})
})
}, [entry])
return (
<Suspense>
<ErrorBoundary>
<Fragment>
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Entry</th>
<th>Unit</th>
<th>In spec</th>
</tr>
</thead>
<tbody>
{console.log(results)}
{results.map(result => (
<tr key={result.number}>
<td>{result.name}</td>
<td>{result.result_type}</td>
<td>
<input
style={{color: 'red'}}
name={result.name}
type={result.type === 'numeric' ? "number" : "text"}
value={entry[result.name] || ''}
onChange={(e) => {
setEntry({...entry, [result.name]: e.target.value})
}}
/>
</td>
<td>{result.unit}</td>
<td>{inSpec[result.name]? 'YES': 'NO'}</td>
</tr>
))}
</tbody>
</table>
<button onClick={saveResults}>Save</button>
</Fragment>
</ErrorBoundary>
</Suspense>
)
}
解决方案
- 您的 GraphQL 突变无效,您声明了变量但没有使用它们。你应该有这样的东西:
const UPDATE_RESULT_MUTATION = gql`
mutation updateResultMutation($number: Int!, $input: updateResultInput){
updateResult(number: $number, input: $input) {
number
name
}
}
`
- 要使用一些变量执行突变,您应该使用以下语法:
mutation({ variables: {
number: 1,
input:
{
inputField: "inputValue",
//... more fields from your state
}
});
我建议将变量重命名为更有意义的名称 - 例如 mutation -> executeUpdateMutation
推荐阅读
- javascript - Ā 如何转换为两个字符 - Ä€ - 在文本文件中打开时,在 Chrome
- c# - 如何将restsharp代码转换为包含文件的httpclient
- powershell - Connect to ssh server with powershell
- python - Discord bot ignores lowercase commands
- jquery - why can't I get the value and show it in a input field using jQuery
- apache-kafka - Is exactly once sematics maintained if KStream#process to do all DB operation and forwards to next consumer and finally write to a topic
- clojure - Access to XMLHttpRequest has been blocked by CORS policy. XMLHttpRequest is controlled by the withCredentials attribute
- c# - LINQ query with date ranges
- javascript - Why am I getting a 'no-unused-vars' warning in a for...of loop and how do I fix it?
- freeradius - Is there any solution to generate code in google authenticator without confirmation?