How to create data in database using Prisma?

[bastianhilton]

Hello I have been attempting to rack my brain around the idea of sending data to my Postgresql database via Prisma. I have a nuxtjs application with Graphql-Yoga, Prisma, and Type-grapqhl running. It allows me to query data but I can't seem to perform any mutations.

Does anyone have a article or can provide a guide on how to do this? This is my current code:

<template>
  <div>
    <form method="POST" enctype="multipart/form-data" @click="addAgreement">
      <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand">
            <button type="reset" class="btn btn-warning">Reset</button></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>
                        <select name="agreementType" id="agreementType" v-model="type">
                          <option value="policies">Policies</option>
                          <option value="agreements">Agreements</option>
                          <option value="announcements">Announcements</option>
                        </select>
                      </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" cols="50" rows="10" value="Add a short Description"></textarea>
                              </td>
                            </tr>
                            <tr>
                              <td style="text-align: right;">Description</td>
                              <td>
                                <editor :init="{ plugins: 'lists link image table code help wordcount'}" />
                              </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 findManyAgreements from "~/graphql/queries/sales/agreements";

  const ADD_AGREEMENTS = gql `
    mutation createOneAgreements ($name:String!,$excerpt:String,$type:String,$content:String,$image:String){
      createOneAgreements(objects: {name: $name, excerpt: $excerpt, type: $type, content: $content, image: $image}) {
        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: findManyAgreements
              })
            } 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>

<style>
  input,
  select,
  option {
    padding: 5px;
  }

  li {
    display: inline-block;
  }

#agreementType {
  width: 50%;
}

</style>

I should also mention that I don't see any errors in the console (cmd nor Dev Console in the browser) when attempting to submit my form.

[austincrim]

Hey @bastianhilton 👋,

Does the GraphQL request make it to your server?
Could you share the server code that does the database write using Prisma?

[bastianhilton]

This is my Graphql Server using Prisma, Type-graphql, and Graphql-yoga

import "reflect-metadata";
import { buildSchema } from "type-graphql";
import { createServer } from '@graphql-yoga/node'

import * as path from "path";
import { PrismaClient } from "@prisma/client";
import { useParserCache } from '@envelop/parser-cache'
import { useValidationCache } from '@envelop/validation-cache'

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 = createServer({
    schema,
    cors: {
      origin: 'http://localhost:4000',
      credentials: true,
      allowedHeaders: ['X-Custom-Header'],
      methods: ['POST'],
    },
    context: (): Context => ({ prisma }),
    plugins: [
      useParserCache({}),
      useValidationCache({})
    ]
  });

  // Start the server and explore http://localhost:4000/graphql
  server.start();
  console.log(`GraphQL is listening on ${origin}!`);
}

main().catch(console.error);

[bastianhilton]

Are you saying that beyond Graphql Mutations, that there must still be written logic to write data into a database using Prisma?

[austincrim]

Ah, I see, you are using the TypeGraphQL + Prisma integration as well. That should generate the required mutations for you.

Are you certain you are using the create mutation name? I would double check the generated resolvers.

[vladi-stevanovic]

👋 Hello @bastianhilton I'm going through pending GitHub Discussions to check if you need any help. Is this issue still open?
Please let us know if we can investigate it further or if you've already solved it, we'd love to know how!

It would be super useful for other users facing this problem! 🙌

[bastianhilton]

I've figured this out, this can be closed. Thank you.

[vladi-stevanovic]

Thank you for the confirmation @bastianhilton ! When you have a moment, we'd appreciate knowing which solution worked?
It would be very helpful for us and for all the users who might face similar issues 😊

[ludralph]

Hi there,

To keep our discussions organized and focused on the most relevant topics, we’re reviewing and tidying up our backlog. As part of this process, we’re closing discussions that have already been marked as answered but remain open.

If this discussion still requires further input or clarification, feel free to reopen it or start a new one with updated details. Your contributions are invaluable to the community, and we’re here to help!

For more details about our priorities and vision for the future of Prisma ORM, check out our latest blog post: https://www.prisma.io/blog/prisma-orm-manifesto.

Thank you for your understanding and ongoing support of the Prisma community!