Vue-Apollo GraphQL突变未正确调用

编程问答 2022-08-23

问题描述

所以，嘿，我有一个启用了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"。

apolloexpress-graphqlgraphqlvue.js