Submission of Form Data via Nextjs and Graphql Apollo

2 years ago

#11972

Esore

I am trying to do a POST method using ApolloGraphql Mutation into my local postgres database. I am able to query and my api works when I am adding a new item via the Apollo Graphql Client, but am trying to figure out a way to post via a form.


import type { NextPage } from 'next'
import Head from 'next/head'
import {Card} from "../components/Card"
//import {products} from "../data/products";
import {gql, useQuery, useMutation} from "@apollo/client"
import { useState } from 'react';

const AllProductQuery = gql`
  query Product_Query {
    products {
      title
      description
    }
  }
  
`;

const AddProducts = gql`
  mutation Add_Product($title: String!
                      $description: String!
  ) {
    product(description: $description, title: $title) {
      id
      description
      title
    }
  }
`;


const Home: NextPage = () => {

  




 const {data, error, loading} = useQuery(AllProductQuery);
 
 const [title, setTitle] = useState("")
 const [description, setDescription] = useState("")
 const [createPost] = useMutation(AddProducts, {
  variables: {
    title,
    description
  }
});
 

 
 
 
 if (loading) {return <p>Loading...</p>}
 if(error) {return <p>{error.message}</p>}







  return (
    <div >
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <div className='container mx-auto my-20 px-5 '>
        {data.products.map((product: any) => (
          <Card key={product.id} title={product.title} description={product.description}  />
          
          
        ))}
        </div>
          
        <form className='flex flex-col p-2' onSubmit={e => {
          e.preventDefault(); createPost();
        }}>
          <input  placeholder="Title" type='text' value={title}onChange={(e) => {setTitle(e.target.value);}} required/>
          <input placeholder="Description" type='text' value={description} onChange={(e) => {setDescription(e.target.value);}} required/>
          <button type="submit" className='bg-blue-500 text-white rounded-lg'>Submit</button>
        </form>
        
        

        
        

     
    </div>
  )
}

export default Home

I am currently creating a [createPost] with a useMutation function and putting my variables as title and description. In the form I then apply that method. Any help would be great!

graphql

next.js

apollo

apollo-client

prisma-graphql

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs