Prisma、graphql 和反应钩子 forms：如何在更新表单突变中使用创建的值

Question

I am trying to make a form that has to create and update functionality. At the moment, when I get to the update form, I can enter new values and they do save to psql, but the form loads with blank fields instead of the values used to create the existing object. I can't find the settings I need to apply to use the existing object values in the update form so that it loads with the fields displaying the currently saved values.

My form has:

import * as React from "react"
import {  CgTrash, CgEditMarkup } from "react-icons/cg"
import { VscIssues } from "react-icons/vsc"

import { gql } from "@apollo/client"
import {
  Box,
  Button,
  ButtonGroup,
  IconButton,
  useDisclosure,
  Wrap,
  Stack,
  Table,
  Tbody,
  Tr,
  Td,
  TableContainer,
  Text
} from "@chakra-ui/react"
import Head from "next/head"
import { useToast } from "lib/hooks/useToast"
import { useForm } from "lib/hooks/useForm"
import { Form } from "components/Form"
import { FormError } from "components/FormError"
import { Input } from "components/Input"
import { Textarea } from "components/Textarea"

import { 
    // IssueGroupInput, 
    useAllIssueGroupsQuery, 
    useCreateIssueGroupMutation, 
    useUpdateIssueGroupMutation,
    useDeleteIssueGroupMutation,  
    IssueGroup as IssueGroupGQLType,  
}  from "lib/graphql"
//
// import { AdminCreateIssueGroupForm } from "components/AdminCreateIssueGroupForm"
// import { AdminUpdateIssueGroupForm } from "components/AdminUpdateIssueGroupForm"
import { AdminLayout } from "components/AdminLayout"
import { AuthedHomeLayout } from "components/AuthedHomeLayout"
import { Modal } from "components/Modal"
import Yup from "lib/yup"


const __ = gql`

  mutation CreateIssueGroup($data: IssueGroupInput!) {
    createIssueGroup(data: $data) {
      id
      title
      
    }
  }  
  query AllIssueGroups {
    allIssueGroups {
      id
      title
    }
  }

  mutation updateIssueGroup($id: String!) {
    updateIssueGroup(id: $id) {
        id
        title
       
    }
  }

  mutation deleteIssueGroup($id: String!) {
    deleteIssueGroup(id: $id) {
      id
      title

    }
  }
`

const IssueGroupSchema = Yup.object().shape({
    title: Yup.string().required(),
    description: Yup.string().required(),
    // issues: Yup.string()
  })
  

function IssueGroups() {
  const toast = useToast()
  // const [search, setSearch] = React.useState("")
  // const [selectedIssueGroups, setSelectedIssueGroups] = React.useState<string[]>([])
  const modalProps = useDisclosure()
  const modalPropsUpdate = useDisclosure()
//   // const [sort, setSort] = React.useState<Sort>({ createdAt: SortOrder.Desc })
  const [createIssueGroup] = useCreateIssueGroupMutation()
  const [updateIssueGroup] = useUpdateIssueGroupMutation()
  const [deleteIssueGroup] = useDeleteIssueGroupMutation()
  const {  data: issueGroups } = useAllIssueGroupsQuery()
  const defaultValues = {
    title: "",
    description: "",
    // issues: "",
  }
  const form = useForm({ defaultValues, schema: IssueGroupSchema })
  const [selectedIssueGroup, setSelectedIssueGroup ] = React.useState<Omit<
  IssueGroupGQLType,
  "createdAt" | "updatedAt" | "issues"
> | null>(null)
  
    const { isOpen, onOpen, onClose } = useDisclosure()

    const onCreateSubmit = async (data: Yup.InferType<typeof IssueGroupSchema>) => {
        return await form.handler(
            () =>
            createIssueGroup({ variables: { data } }),
            {
                onSuccess: async (res, toast) => {
                    // await refetchAllIssueGroups()
                    toast({
                        title: "IssueGroup created",
                        status: "success",
                    })
                    form.reset()
                    onClose()
                }
            }
        )
    }

    const handleUpdateSubmit = async (data: Yup.InferType<typeof IssueGroupSchema>) => {
        console.log(selectedIssueGroup.id)
        return await form.handler(
           
            () =>
           
            updateIssueGroup({ variables: { 
                id: selectedIssueGroup.id, 
                // issues: "none",
                data: { ...data } 
            } }),
        )
    }


    const onDeleteIssueGroup = async (id: string) => {
        return
        form.handler(
            () =>
                deleteIssueGroup({ variables: { id } }),
                {
                onSuccess: async () => {
                await fetch("api/issueGroups", { method: "delete"})
                toast({
                    title: "IssueGroup deleted",
                    status: "success",
                })
                },
                // refetchAllIssueGroups()
            },
        )
    }
  return (
    <Box>
      <Head>
        <title>trying to figure out how to crud in prisma react hook forms</title>
      </Head>

      <Wrap mb={4} spacing={2}>
        <Button
          onClick={modalProps.onOpen}
          leftIcon={<Box boxSize="18px" as={VscIssues} />}
          color="brand.white"
          fontWeight="normal"
          backgroundColor="brand.orange"
          _hover={{
            backgroundColor: "brand.green",
            color: "brand.white",
          }}
        >
          Create issueGroup
        </Button>
      </Wrap>

      <Modal {...modalProps} title="Create IssueGroup">
        {/* <AdminCreateIssueGroupForm onClose={modalProps.onClose} /> */}
        <Form {...form} onSubmit={onCreateSubmit}>
            <Stack>
                <Input name="title" label="Title" />

                {/* <Input name="description" label="Description" /> */}
                {/* <Text mb='8px' fontWeight="medium" fontSize="sm" > Description</Text> */}
                <Textarea name="description" label="Describe" rows={4} />

                <FormError />
                <ButtonGroup>
                <Button onClick={modalProps.onClose}>Cancel</Button>
                <Button
                    type="submit"
                    isLoading={form.formState.isSubmitting}
                    isDisabled={form.formState.isSubmitting}
                    color="brand.white"
                    fontWeight="normal"
                    backgroundColor="brand.orange"
                    _hover={{
                    backgroundColor: "brand.green",
                    color: "brand.white",
                    }}
                >
                    Create
                </Button>
                </ButtonGroup>
            </Stack>
            </Form>
      </Modal>

        <TableContainer maxW="80%">
            <Table variant='simple'>
            <Tbody>
            {issueGroups?.allIssueGroups.map((issueGroup) => (
                <Tr key={issueGroup.id}>

                <Td>
                    <Text textStyle="h6">{issueGroup.title}</Text>

                </Td>
                <Td>
                    <ButtonGroup>
                    <IconButton
                        variant='outline'
                        color="brand.blue"
                        fontWeight="normal"
                        backgroundColor="brand.white"
                        aria-label='Update Issue Group'
                        fontSize='15px'
                        ml={4}
                        icon={<CgEditMarkup />}
                        // onClick={modalPropsUpdate.onOpen}
                        onClick={() => {
                            setSelectedIssueGroup(issueGroup)
                            modalPropsUpdate.onOpen()
                        }}
                        _hover={{
                            backgroundColor: "brand.blue",
                            color: "brand.white",
                        }}
                    />

                    {/* {
                        selectedIssueGroup && isOpen && 
                        <Modal issueGroup={selectedIssueGroup} isOpen={isOpen} onClose={onClose}  title="Edit IssueGroup"  >
                    } */}

                        <Modal {...modalPropsUpdate } title="Edit IssueGroup"  >

                        {/* <AdminUpdateIssueGroupForm
                        onClose={modalPropsUpdate.onClose}
                        issueGroup={selectedIssueGroup} */}
                        {/* /> */}
                            <Form {...form} onSubmit={handleUpdateSubmit}>
                                <Stack>
                                    <Input name="title" label="Title" defaultValue={selectedIssueGroup.title} />

                                  
                                    <Textarea name="description" label="Describe" rows={4} defaultValue={selectedIssueGroup.description} />

// I also tried using the defaultValue as issueGroup.title/description, but those don't load the values either. When I try with issueGroup.title, the modal loads with empty fields (there are values saved in psql). When I try with selectedIssueGroup.title, the error message says:

TypeError: Cannot read properties of null (reading 'title').

I know there is a title because it renders on the page when I list existing objects. I also know the update is working because I can see psql update.

                                    <FormError />
                                    <ButtonGroup>
                                    <Button onClick={modalPropsUpdate.onClose}>Cancel</Button>
                                    <Button
                                        type="submit"
                                        isLoading={form.formState.isSubmitting}
                                        isDisabled={form.formState.isSubmitting}
                                        color="brand.white"
                                        fontWeight="normal"
                                        backgroundColor="brand.orange"
                                        _hover={{
                                        backgroundColor: "brand.green",
                                        color: "brand.white",
                                        }}
                                    >
                                        Save changes
                                    </Button>
                                    </ButtonGroup>
                                </Stack>
                            </Form>
                        </Modal>

                    <IconButton
                        variant='outline'
                        color="brand.tomato"
                        fontWeight="normal"
                        backgroundColor="brand.white"
                        aria-label='Call Sage'
                        fontSize='15px'
                        ml={4}
                        icon={<CgTrash />}
                        onClick={() => onDeleteIssueGroup(issueGroup.id)}
                        _hover={{
                        backgroundColor: "brand.tomato",
                        color: "brand.white",
                        }}
                    />
                    </ButtonGroup>

                </Td>

                </Tr>
                ))}
            </Tbody>

            </Table>
        </TableContainer>

    </Box>
  )
}

IssueGroups.getLayout = (page: React.ReactNode) => <AuthedHomeLayout><AdminLayout>{page}</AdminLayout></AuthedHomeLayout>

export default IssueGroups

ARJUN'S SUGGESTIONS

I tried each of Arjun's suggestions in his answer below. The results were as follows:

First suggestion - being to add a use effect statement to the issues.tsx to try and set the value of issueGroup. To do this, I added this effect beneath the definition of setSelectedIssueGroup:

useEffect(()=>{ 
  if(selectedIssueGroup) 
    modalPropsUpdate.onOpen() 
}, [selectedIssueGroup]);

When I try this, I get an error in my vsCode that says:

React Hook useEffect has a missing dependency: 'modalPropsUpdate'. Either include it or remove the dependency array.

modalPropsUpdate is defined above that useEffect as:

  const modalPropsUpdate = useDisclosure()

To address that error, I tried commenting out that line. In that case, the useEffect is:

useEffect(()=>{ 
    if(selectedIssueGroup) 
      // modalPropsUpdate.onOpen() 
  }, [selectedIssueGroup]);

The error message says:

expression expected.

I don't know what this means.

When I try to load the local host with this error, the error message is:

Error: x Unexpected token } . Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, `

I think Arjun might be expecting that I would put async and await somewhere in this solution, but I don't know where to put them.

| for template literal, (, or an identifier

The onClick handler for update still has:

 onClick={() => {
     setSelectedIssueGroup(issueGroup)
     modalPropsUpdate.onOpen()
                           
 }}

Second suggestion - being to use value instead of defaultValue in the input fields.

When I try this, by removing defaultValue and adding: value={issueGroup?.title} to the inputs, the modal loads, with blank fields, but which update with the saved value when I click inside the input field.

However, I can't update the value even if this UX issue were okay (it isn't). The field becomes fixed and I can't type in it.

Third suggestion - being to define the defaultValues by using setValue. To implement this, I tried:

const { setValue } = useForm();
  
  
  const defaultValues = {
    title: setValue("title", selectedIssueGroup?.title),
    description: setValue("description", selectedIssueGroup?.description),
    // issues: "",
  }
  const form = useForm({ defaultValues, schema: IssueGroupSchema })

The modal loads (but with a blacked-out screen behind it, whereas other successful attempts just blur the background), but the saved values are not revealed in the input fields of the update form.

SANDBOX

I tried to make a sandbox for this form here . I don't know how to add the server connections to generate the types or mutations inside the code sandbox, so instead, I copied the prisma db extracts.

Answer 1

Try 1:

Possibly the state update completes after you open the modal because you wrote

setSelectedIssueGroup(issueGroup)
modalPropsUpdate.onOpen() // immediately opening modal

Here state update will take some time to set selectedIssueGroup . before that modal gets opened and you have null as default state value so you might get the error.

You need to open the modal once the state got set. You can achieve this using useEffect .

useEffect(()=>{ 
  if(selectedIssueGroup) 
    modalPropsUpdate.onOpen() 
}, [selectedIssueGroup]);

Try 2:

if your modal gets mounted to DOM even before opening it, then your defaultValue will be set null. In that case you have to use value prop in <Input /> instead of defaultValue to set your values.

and handle null in input like

<Input name="title" label="Title" defaultValue={selectedIssueGroup?.title} />

Try 3:

you can get the setValue from useForm() like this,

const { setValue } = useForm();

and use it to set any field value with name

setValue("title", selectedIssueGroup.title);

Answer 2

To display the existing values in your form when it is in update mode, you can pass the existing values as the defaultValues to the useForm hook. You can then retrieve these values using the form.values object within your form.

Here is an example of how you might modify your form to display the existing values:

const IssueGroupForm = ({ issueGroup }: { issueGroup: IssueGroupGQLType | null }) => {
  const form = useForm({
    defaultValues: issueGroup
      ? {
          title: issueGroup.title,
          description: issueGroup.description,
          // issues: issueGroup.issues,
        }
      : {
          title: '',
          description: '',
          // issues: '',
        },
    schema: IssueGroupSchema,
  });

  return (
    <Form onSubmit={form.handleSubmit}>
      <Input
        name="title"
        label="Title"
        placeholder="Enter the title"
        value={form.values.title}
        onChange={form.handleChange}
        error={form.errors.title}
      />
      <Textarea
        name="description"
        label="Description"
        placeholder="Enter the description"
        value={form.values.description}
        onChange={form.handleChange}
        error={form.errors.description}
      />
      {/* <Input
        name="issues"
        label="Issues"
        placeholder="Enter the issues"
        value={form.values.issues}
        onChange={form.handleChange}
        error={form.errors.issues}
      /> */}
      <ButtonGroup spacing={4}>
        <Button type="submit" variantColor="blue">
          {issueGroup ? 'Update' : 'Create'}
        </Button>
        {issueGroup && (
          <Button
            onClick={() => {
              setSelectedIssueGroup(null);
              onClose();
            }}
          >
            Cancel
          </Button>
        )}
      </ButtonGroup>
      {form.isSubmitting && <FormError error={form.error} />}
    </Form>
  );
};

In this example, the defaultValues are determined based on whether an issueGroup object is passed to the form. If an issueGroup is passed, the form will use the values from that object as the default values. If no issueGroup is passed, the form will use the default values specified in the defaultValues object.

You can then pass the issueGroup object to the form when you want to display the existing values, like this:

<IssueGroupForm issueGroup={selectedIssueGroup} />

This will display the existing values in the form when it is in update mode, and display blank fields when it is in create mode.