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"。