Form wont submit data with react v18 and next js v12.3.1 #218

MincePie · 2022-11-18T20:49:10Z

MincePie
Nov 18, 2022

I am trying to figure out how to make a form in a react, apollo, prisma app, using chakra-react-select.

This is my attempt:

import * as React from "react"
import { Box, Center, Heading, Button  } from "@chakra-ui/react"
import { Select } from "chakra-react-select"
import { gql } from "@apollo/client"
import Head from "next/head"
import { IssueInput, useAllIssuesQuery, useCreateIssueMutation } from "lib/graphql"
import { useRouter } from "next/router"

import { REDIRECT_PATH } from "lib/config"

import * as c from "@chakra-ui/react"
import { Input } from "components/Input"

import { HomeLayout } from "components/HomeLayout"
import { Limiter } from "components/Limiter"
import { Form } from "components/Form"
import { withAuth } from "components/hoc/withAuth"

import Yup from "lib/yup"
import { useForm } from "lib/hooks/useForm"
import { useMe } from "lib/hooks/useMe"
import { useToast } from "lib/hooks/useToast"
import { useController } from "react-hook-form"



const _ = gql`
  mutation CreateIssue($data: IssueInput!) {
    createIssue(data: $data) {
      id
      title
      issueCategory
      description
    }
    # userId
  }
  query AllIssues {
    allIssues {
      id
      title
    #   issueId
      description
      issueCategory
      userId
    }
  }
`

const IssueSchema = Yup.object().shape({
  title: Yup.string().required("Title is required"),
  issueCategory: Yup.object().required(),
  description: Yup.string().required("Description is required"),
})

function Issue() {
  const toast = useToast()
  const { me, loading: meLoading } = useMe()
  const [createIssue] = useCreateIssueMutation()
  const { data: issues, refetch } = useAllIssuesQuery()
  const router = useRouter()
  const redirect = router.query[REDIRECT_PATH] as string | undefined
  const form = useForm({ schema: IssueSchema })
  const {
    field: { onChange, onBlur, value, ref },
    fieldState: { error },
  } = useController({
    name: "issueCategory",
    control: form.control,
    rules: { required: "Issue category is required" },
  })

  const onSubmit = (data: IssueInput) => {
    console.log("hello onsubmit", data) /// I can see this in my console when I try to submit this form but  instead of storing the data it says undefined

[![enter image description here][1]][1]

    return form.handler(
      () =>
        createIssue({
          variables: {
            data: {
              ...data,
              // @ts-ignore
              issueCategory: data.issueCategory.value,
              userId: me?.id || "",
            },
          },
        }),

      {
        onSuccess: async (data) => {
          console.log(data)
          await fetch("api/issue", { method: "post" }),
            toast({
              title: "Issue created",
              description: "Your issue has been created",
              status: "success",
            })
          refetch()
          form.reset()
          router.replace(redirect || "/")
        },
      },
    )
  }

  if (meLoading)
    return (
      <c.Center>
        <c.Spinner />
      </c.Center>
    )

  if (!me) return null

  console.log("select error", error)
  return (
    <Box>
      <Head>
        <title>Create</title>
      </Head>

      <Limiter pt={20} minH="calc(100vh - 65px)">
        <Center flexDir="column">
          <Heading
            as="h1"
            size="3xl"
            
          >
            Create Issue
          </Heading>
          <Form onSubmit={onSubmit} {...form}>
            <c.Stack spacing={2}>
              <c.Heading>Issues</c.Heading>
              <Input autoFocus name="title" label="Title" placeholder="Eg: change" />
              <Input
                name="description"
                label="Description"
                placeholder="Eg: change"
              />
              <Select
           
                options={[
                  {
                    label: "I can't be removed",
                    value: "fixed",
                    isFixed: true,
                  },
                  {
                    label: "I can be removed",
                    value: "not-fixed",
                  },
                ]}
                placeholder="Select issue category"
                closeMenuOnSelect={true}
                onChange={onChange}
                onBlur={onBlur}
                value={value}
                ref={ref}
              />
              <p>{error?.message}</p>

              <Button
                color="brand.orange"
                type="submit"
                // isFullWidth
                isDisabled={form.formState.isSubmitting || !form.formState.isDirty}
                isLoading={form.formState.isSubmitting}
              >
                Create Issue
              </Button>
              <c.List>
                {issues?.allIssues.map((issue) => (
                  <c.ListItem key={issue.id}>
                    {issue.title}
                    {/* {issue.issueCategory}  */}  - if I uncomment this line, then i get an error as described below
                    {issue.description}
                  </c.ListItem>
                ))}
              </c.List>
            </c.Stack>
          </Form>
        </Center>
      </Limiter>
    </Box>
  )
}

Issue.getLayout = (page: React.ReactNode) => <HomeLayout>{page}</HomeLayout>

export default withAuth(Issue)

I can't understand why my terminal is giving me an error message that says that the property named issueCategory does not exist on type Issue. I can see that a type has been generated for IssueCategory:


    export type Issue = {
      __typename?: 'Issue';
      createdAt: Scalars['DateTime'];
      description: Scalars['String'];
      id: Scalars['String'];
      issueCategory: Category;
      title: Scalars['String'];
      updatedAt: Scalars['DateTime'];
      userId: Scalars['String'];
    };

My prisma schema also has an attribute for issueCategory, as follows:


    model Issue {
      id                String           @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
      title             String
      description       String
      issueCategory     Category
      // Template          Template[]
      createdAt         DateTime    @default(now()) @db.Timestamptz(6) 
      updatedAt         DateTime    @default(now()) @updatedAt @db.Timestamptz(6)
      User              User[]
      userId          String      @db.Uuid
    }

Category is also defined in graphql.tsx as:

export enum Category {
  Future = 'FUTURE',
  Natural = 'NATURAL',
  Social = 'SOCIAL'
}

Apart from this strange error message, I don't have any other errors in my terminal. I don't get any information about the error in my console either - it just says 'select error undefined'. I can see in the entry above the error line, that the json packet includes the selection i made when the form loads.

What is the step required to submit this form? Currently my console logs that the data submitted is undefined.

csandman · 2022-11-28T21:13:41Z

csandman
Nov 28, 2022
Maintainer

There is a lot of code here, and I'm not sure exactly how this is related to chakra-react-select. I have a lot of examples of using CRS with react-hook-form you can check out here: https://github.com/csandman/chakra-react-select#react-hook-form

Otherwise, I'm not sure what issue you're having exactly, or if it's specifically related to CRS.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Form wont submit data with react v18 and next js v12.3.1 #218

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Form wont submit data with react v18 and next js v12.3.1 #218

MincePie Nov 18, 2022

Replies: 1 comment

csandman Nov 28, 2022 Maintainer

MincePie
Nov 18, 2022

csandman
Nov 28, 2022
Maintainer