Vue-Apollo GraphQL Mutation not properly getting invoked

Question

So hey, I have a Express GraphQL API Server (hooked up to a SQLite DB) with CORS enabled. I'm using Vue-Apollo and the Apollo Client to try and send mutations but for some reason it isn't probably inserting. Manually running the mutation through the GraphiQL UI works fine but not through triggering my Vue method.

Here's the HTML portion.

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

And here's the Vue/JS portion.

  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();
    }

Sorry it's pretty messy but I'm not sure why it's not properly inserting. Like I previously said the mutation through the GraphiQL works. I have a separate method that deletes with a mutation and that seems to work fine.

edit - How the SQL schema looks like

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();

And this is how the GraphQL portion looks like

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 }
}
});

could you share the graphQL schema? also are you receiving any kind of error message from your API? — sebasaenz
@sebasaenz Sorry for the late reply, but I updated the post with the SQL schema and the GraphQL one — animusdx
Also there was no error. Every time I hit the button that invokes the createSources() method, it just refreshes. The alert correctly shows that the values are being correctly bound using v-model. If I manually use the createSources mutation query with GraphQL and then use the Delete from the frontend it works, but I'm not sure why the createSources method isn't wokring. — animusdx

animusdx animusdx · Accepted Answer · 2020-08-12T20:48:05

Okay, so it turns out I'm not very bright and it was because I had a typo in my field - $awayTeamid is meant to be $awayTeamId.

That and all the input types needed to be changed from <input type="text" to <input type="number" as it turned out that I was getting some type coercion issues.

Vue-Apollo GraphQL Mutation not properly getting invoked

1 Answers