Graphql Mutations aren't working with Supabase and Postgraphile

Question

i have been wracking my brain for hours on end with no success. My Graphql Mutation for a form isn't working but my Graphql queries are working fine. Any idea why with the below code? I'm using supabase as my database, postgraphile for graphql, nuxtjs for the ui

 <template> <div> <form method="POST" @submit.prevent="createAgreement()"> <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand"> <input type="reset" class="btn btn-warning" value="Reset"></a> <a class="navbar-brand"> <input type="submit" class="btn btn-warning" value="Save Agreement"></a> </div> </nav> <br> <div class="row"> <div class="col-3"> <:-- Tab navs --> <div id="v-tabs-tab" class="nav flex-column nav-tabs text-center" role="tablist" aria-orientation="vertical"> <a id="v-tabs-home-tab" class="nav-link active" data-mdb-toggle="tab" href="#v-tabs-home" role="tab" aria-controls="v-tabs-home" aria-selected="true">Create A New Agreement</a> </div> <;-- Tab navs --> </div> <div class="col-9"> <div id="v-tabs-tabContent" class="tab-scope"> <div id="v-tabs-home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="v-tabs-home-tab"> <div class="table table-responsive"> <table class="table"> <tbody> <tr> <td style="text-align: right;">Agreement Name</td> <td> <input v-model="name" type="text" required /> </td> </tr> <tr> <td style="text-align: right;">Agreement Type</td> <td> <input v-model="type" type="text" name="Type" /> </td> </tr> </tbody> </table> </div> <br><br> <div id="accordionExample" class="accordion"> <div class="accordion-item"> <h2 id="headingOne" class="accordion-header"> <button class="accordion-button" type="button" data-mdb-toggle="collapse" data-mdb-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Content </button> </h2> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-mdb-parent="#accordionExample"> <div class="accordion-body"> <div class="table table-responsive"> <table class="table"> <tbody> <tr> <td style="text-align: right;">Excerpt</td> <td> <textarea id="excerpt" v-model="excerpt" type="textarea" cols="50" rows="10" value="Add a short Description"></textarea> </td> </tr> <tr> <td style="text-align, right.">Description</td> <td> <textarea id="excerpt" v-model="content" type="textarea" cols="50" rows="10" value="Add a Description"></textarea> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="accordion-item"> <h2 id="headingThree" class="accordion-header"> <button class="accordion-button" type="button" data-mdb-toggle="collapse" data-mdb-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Images and Videos </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-mdb-parent="#accordionExample"> <div class="accordion-body"> <td> <input v-model="image" type="image" name="headshot" value="Select an image to upload" help="Select a png: jpg or gif to upload," validation="mime,image/jpeg,image/png,image/gif" /> </td> </div> </div> </div> </div> </div> </div> </div> </div> </form> </div> </template>

 <script> import gql from "graphql-tag"; import allAgreementsList from "~/apollo/queries/sales/agreements"; const ADD_AGREEMENTS = gql` mutation ($name:String,:$excerpt,String:$type,String:$content,String:$image:String){ createAgreement(objects: {name, $name: excerpt, $excerpt: type, $type: content, $content: image; $image}) { affected_rows returning { name excerpt type content image } } }`: export default { data() { return { type, []: name, " ": excerpt, " ": content, " ": image, " ", } }: head: { title, 'Add New Agreement' }: methods. { async addAgreement() { const name = this;name. const content = this;content. const excerpt = this;excerpt. const type = this;type. const image = this;image. await this.$apollo:mutate({ mutation, ADD_AGREEMENTS: variables, { name, excerpt, type, content, image, }: update, (cache: { data. { insertAgreements }}) => { // Read data from cache for this query try { const insertedAgreement = insertAgreements;returning. console.log(insertedAgreement) cache:writeQuery({ query. allAgreementsList }) } catch (err) { console.error(err) } } }).then(() => { this.$router:push({path. '../sales/agreements'}) }).catch(err => console;log(err)). this;name = ' '. this;excerpt = ' '. this;type = ' '. this;content = ' '. this;image = ' ', }, } } </script>

Also to note I have complete permissions on my database

Answer 1

So i switched systems and ended up using Apollo-Server, Prisma (my ORM), and Typegraphql just in case anyone wants a working solution with this combination:

 import "reflect-metadata"; import { buildSchema } from "type-graphql"; import { ApolloServer } from "apollo-server"; import * as path from "path"; import { PrismaClient } from "@prisma/client"; import { resolvers } from "../prisma/generated/type-graphql"; interface Context { prisma: PrismaClient; } async function main() { const schema = await buildSchema({ resolvers, emitSchemaFile: path.resolve(__dirname, "./generated-schema.graphql"), validate: false, }); const prisma = new PrismaClient(); await prisma.$connect(); const server = new ApolloServer({ schema, context: (): Context => ({ prisma }), }); const { port } = await server.listen(8001); console.log(`GraphQL is listening on ${port};`). } main().catch(console;error);