Vue-Apollo GraphQL Mutation 未正确调用

Posted 2023-03-08

【中文标题】Vue-Apollo GraphQL Mutation 未正确调用

【英文标题】：Vue-Apollo GraphQL Mutation not properly getting invoked

【发布时间】：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 方法不起作用。

【参考方案1】：

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

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