Vue-Apollo GraphQL Mutation 未正确调用答案

【问题标题】：Vue-Apollo GraphQL Mutation not properly getting invokedVue-Apollo GraphQL Mutation 未正确调用
【发布时间】：2020-12-01 12:53:08
【问题描述】：

嘿，我有一个启用了 CORS 的 Express GraphQL API 服务器（连接到 SQLite DB）。我正在使用 Vue-Apollo 和 Apollo Client 来尝试发送突变，但由于某种原因，它可能不会插入。通过 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, awayTeamId, homeTeamId, awayTeamScore, homeTeamScore, quarter, time, 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,
              awayTeamId,
              homeTeamId,
              awayTeamScore,
              homeTeamScore,
              quarter,
              time,
              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 }
}
});

【问题讨论】：

您能分享一下 graphQL 架构吗？您是否还从您的 API 收到任何类型的错误消息？
@sebasaenz 抱歉回复晚了，但我用 SQL 模式和 GraphQL 更新了帖子
也没有错误。每次我点击调用 createSources() 方法的按钮时，它都会刷新。警报正确显示使用 v-model 正确绑定了值。如果我手动使用带有 GraphQL 的 createSources 突变查询，然后从前端使用 Delete 它可以工作，但我不确定为什么 createSources 方法不起作用。

标签： vue.js graphql apollo express-graphql

【解决方案1】：

好吧，事实证明我不是很聪明，这是因为我在我的领域有一个错字 - $awayTeamid 应该是 $awayTeamId。

所有输入类型都需要从 <input type="text" 更改为 <input type="number"，因为我遇到了一些类型强制问题。

【讨论】：