reactjs - 将函数结果传递给 graphql 突变
问题描述
我的checker()
函数确定用户的输入 (checkedNumber) 在我的素数数据库中是否匹配。如果有,我需要updateCheckedNumber()
运行,以便checkedNumber.matchingPrime
使用该素数进行更新。我无法弄清楚如何将质数传递给突变。
这是我的组件的代码。目前,我正在硬编码matchingPrime
以更新为“100”。这在数据库中正确反映。
class Prime extends Component {
updateCheckedNumber = async (checkedNumber) => {
await this.props.updateCheckedNumber({
variables: {
id: checkedNumber.id,
matchingPrime: checkedNumber.matchingPrime
},
update: store => {
const data = store.readQuery({ query: CheckedNumbersQuery });
data.checkedNumbers = data.checkedNumbers.map(
x =>
x.id === checkedNumber.id
? {
...checkedNumber, matchingPrime: "100"
}
: x
);
store.writeQuery({ query: CheckedNumbersQuery, data });
}
})
}
checker = () => {
let primes = (this.props.data.primeNumbers)
let nums = this.props.checkedNumbersFromParent;
let recentCheckedObject = (nums[nums.length - 1]);
let recentCheckedNumber = (nums[nums.length - 1].text);
let recentCheckedRegExp = new RegExp(recentCheckedNumber);
for (var i in primes) {
let count = 0;
if (primes[i].text.search(recentCheckedRegExp) >= 0 && count < 1) {
count = count + 1;
this.updateCheckedNumber(recentCheckedObject);
}
}
}
这是我服务器端的解析器:
const resolvers = {
Query: {
primeNumbers: () => PrimeNumber.find(),
checkedNumbers: () => CheckedNumber.find()
},
Mutation: {
createCheckedNumber: async (_, {text}) => {
const checkedNumber = new CheckedNumber({text, matchingPrime: "nada"});
await checkedNumber.save();
return checkedNumber;
},
updateCheckedNumber: async (_, {id, matchingPrime}) => {
await CheckedNumber.findByIdAndUpdate(id, {matchingPrime});
return true;
},
非常感谢你看这个。
解决方案
我看到您有一个解析器,但我还没有看到您的updateCheckedNumber
解析器的架构。给定您的解析器,我们可以制作如下模式:
##updateCheckedNumber.graphql
type Prime {
id: String
value: Number
}
type Mutation {
updateCheckedNumber(id: String!, matchingPrime: Number!): Prime
}
现在您将需要一个查询字符串,您可以将其作为道具传递到您的反应组件中。我们可以使用gql
from来做到这一点graphql-tag
,如下所示:
const updateCheckedNumber = gql`
mutation updateCheckedNumber($id: String!, $matchingPrime: Number!) {
updateCheckedNumber(id: $id, matchingPrime: $matchingPrime) {
id,
value
}
}
`
现在我们已经有了,我们需要用graphql
from包装我们的反应组件,react-apollo
如下所示:
export default graphql(updateCheckedNumber, {
name: 'updateCheckedNumber'
})(MyReactComponent)
现在在您的反应组件中,您可以访问props.updateCheckedNumber
并这样称呼它:
props.updateCheckedNumber({
variables: {
id: theId,
matchingPrime: theCheckedNumber
}
})
希望这可以帮助!
PS 如果您有一个 Query 可以为您提供质数列表,例如primeNumbers
,您将需要在graphql
调用的选项中重新获取 Queries。或者InMemoryCache
手动更新。
推荐阅读
- javascript - 如何使用 Angular 8 在重新连接互联网时重新发送失败的 API 请求?
- postgresql - 在 BigQuery 中计算不同的 concat
- mysql - Mysql 查询优化 - 共享查询需要优化
- java - Finding Object in Array of Arrays based in Sub-Object condition
- testing - 有没有办法将所有测试用例从一个 JIRA 项目复制/移动到另一个,我安装了 Xray 插件
- google-cloud-platform - 如何为混合的 HTTPS 和 gRPC 流量设置 GCP LoadBalancer
- ios - AudioKit - 如何使用 AKAmplitudeTracker 阈值回调?
- ios - UITableView insertRows(at: indexPath) 返回无效行数错误
- c++ - 将 AoS 转换为 SoA 时处理组合爆炸
- postgresql - 将 Apache 超集与 PostgreSQL 连接起来