Create issue mutation

Next, to create an issue, we need to make the mutation for that. Urql, by default will handle keeping the issue query up to date whenever we make a new issue from this mutation. This is due to the built in normalized caching.

// gql/createIssueMutation
import { gql } from 'urql'

export const CreateIssueMutation = gql`
  mutation CreateIssue($input: CreateIssueInput!) {
    createIssue(input: $input) {
      createdAt
      id
      name
      status
    }
  }
`

Now, we need to use this mutation when a user clicks create in the new issue modal.

// app/(dashboard)/page.tsx
import { useMutation, useQuery } from 'urql'
import { CreateIssueMutation } from '@/gql/createIssueMutation'

const IssuesPage = () => {
	//...
	const [newIssueResult, createNewIssue] = useMutation(CreateIssueMutation)
	const { isOpen, onOpen, onOpenChange } = useDisclosure()
  const [issueName, setIssueName] = useState('')
  const [issueDescription, setIssueDescription] = useState('')
	
	const onCreate = async (close) => {
    const result = await createNewIssue({
      input: { name: issueName, content: issueDescription },
    })

    if (result.data) {
      close()
      setIssueName('')
      setIssueDescription('')
    }
  }
}