如何解决Vue-Apollo GraphQL突变未正确调用
所以,嘿,我有一个启用了CORS的Express GraphQL API服务器(已挂接到SQLite数据库)。我正在使用Vue-Apollo和Apollo客户端尝试发送变异,但由于某种原因,它可能无法插入。通过GraphiQL UI手动运行突变效果很好,但不能通过触发我的Vue方法来实现。
这是HTML部分。
<label>scoresId</label>
<input type="text" name="scoresId" v-model="scoresId">
<br>
<label>awayTeamId</label>
<input type="text" name="awayTeamId" v-model="awayTeamId">
<br>
<label>homeTeamId</label>
<input type="text" name="homeTeamId" v-model="homeTeamId">
<br>
<label>awayTeamScore</label>
<input type="text" name="awayTeamScore" v-model="awayTeamScore">
<br>
<label>homeTeamScore</label>
<input type="text" name="homeTeamScore" v-model="homeTeamScore">
<br>
<label>quarter</label>
<input type="text" name="quarter" v-model="quarter">
<br>
<label>time</label>
<input type="text" name="time" v-model="time">
<br>
<input
v-if="scoresId"
type="button"
@click="createScores(scoresId,awayTeamId,homeTeamId,awayTeamScore,homeTeamScore,quarter,time,gameComplete)"
value="Add"
>
这是Vue / JS部分。
methods: {
createScores(scoresId,gameComplete) {
alert(`Create score: ${scoresId},${awayTeamId},${homeTeamId},${awayTeamScore},${homeTeamScore},${quarter},${time},${gameComplete}`)
//console.log("Create score:",scoresId)
this.$apollo.mutate({
mutation: gql`mutation scoresCreate($scoresId: String!,$awayTeamid: Int! $homeTeamId: Int!,$awayTeamScore: Int!,$homeTeamScore: Int!,$quarter: Int!,$time: Int! $gameComplete: Boolean!) {
createScores(scoresId: $scoresId,awayTeamId: $awayTeamId,homeTeamId: $homeTeamId,awayTeamScore: $awayTeamScore,homeTeamScore: $homeTeamScore,quarter: $quarter,time: $time,gameComplete: $gameComplete) {
scoresId,gameComplete
}
}`,variables:{
scoresId: scoresId,awayTeamId: awayTeamId,homeTeamId: homeTeamId,awayTeamScore: awayTeamScore,homeTeamScore: homeTeamScore,quarter: quarter,time: time,gameComplete: gameComplete
}
}
)
location.reload();
}
对不起,它很乱,但是我不确定为什么不能正确插入。就像我之前说的,通过GraphiQL进行的突变有效。我有一个单独的方法,该方法可以删除带有突变的片段,而且似乎可以正常工作。
编辑-SQL模式的外观
const createScoresTable = () => {
const query = `
CREATE TABLE IF NOT EXISTS scores (
scoresId string PRIMARY KEY,awayTeamId integer,homeTeamId integer,awayTeamScore integer,homeTeamScore integer,quarter integer,time integer,gameComplete boolean)
`;
return database.run(query);
}
createScoresTable();
这就是GraphQL部分的样子
const ScoresType = new graphql.GraphQLObjectType({
name: "Scores",fields: {
scoresId: { type: graphql.GraphQLString },awayTeamId: { type: graphql.GraphQLInt },homeTeamId: { type: graphql.GraphQLInt },awayTeamScore: { type: graphql.GraphQLInt },homeTeamScore: { type: graphql.GraphQLInt },quarter: { type: graphql.GraphQLInt },time: { type: graphql.GraphQLInt },gameComplete: { type: graphql.GraphQLBoolean }
}
});
解决方法
好的,事实证明我不是很聪明,这是因为我在我的领域里有错别字-$awayTeamid
就是$awayTeamId
。
由于我遇到了一些类型强制问题,因此需要将所有输入类型从<input type="text"
更改为<input type="number"
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。