Executando verificação de segurança...
0
kaioodutra
5 min de leitura ·

NextJs + Apollo Client + useForm + zod [Não Passa Variables para Mutatio]

Quem puder me ajduar ficarei grato! Não estou conseguiundo passar as variables para a Mutation. Porém se passar de forma estática direto na mutation funciona, Alguma luz!

`import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { z, ZodError } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { useRouter } from 'next/router'
import { useQuery, useMutation, gql } from '@apollo/client'

// ** MUI Imports
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import MenuItem from '@mui/material/MenuItem'
import TextField from '@mui/material/TextField'
import CardHeader from '@mui/material/CardHeader'
import InputLabel from '@mui/material/InputLabel'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import FormControl from '@mui/material/FormControl'
import Select from '@mui/material/Select'

import ModalExcluirCliente from './ModalExcluirCliente'
import SnackBarCliente from './SnackBarCliente'

const getClienteById = gql query Cliente($id: String!) { cliente(id: $id) { _id bairro cep cidade complemento cpf_cnpj data_atualizacao data_registro email excluido nome numero referencia rua status telefone uf whatsapp } }

const updateCliente = gql mutation AtualizarCliente($id: String!, $data: clienteAtualizacaoInput!) { atualizarCliente(id: $id, data: $data) { _id nome } }

const FormularioCadastro = () => {
const router = useRouter()
const { id } = router.query

const [autoCep, setAutoCep] = useState('')
const [autoUf, setAutoUf] = useState('')
const [status, setStatus] = useState('')

const [showSnackbar, setShowSnackbar] = useState(false)
const [onSave, setOnSave] = useState(false)

const updateClienteSchema = z.object({
status: z.string().nonempty('O status é obrigatório.'),
nome: z
.string()
.nonempty('O nome é obrigatório.')
.min(2, 'O nome deve conter no mínimo 2 caracteres.')
.max(50, 'O nome deve conter no máximo 50 caracteres.')
.transform(nome => {
return nome
.trim()
.split(' ')
.map(nome => {
return nome[0].toLocaleUpperCase().concat(nome.substring(1))
})
.join(' ')
}),
email: z.string().email('Formato de e-mail inválido').toLowerCase().trim().optional().or(z.literal('')),
Telefone: z.string().min(11).max(11).optional().or(z.literal('')),
WhatsApp: z.string().min(11).max(11).optional().or(z.literal('')),
cpf_cnpj: z.string().min(11).max(13).optional().or(z.literal('')),
cep: z.string().min(8).max(8).optional().or(z.literal('')),
cidade: z.string().min(2).max(50).optional().or(z.literal('')),
uf: z.string().min(2).max(2).optional().or(z.literal('')),
rua: z.string().min(2).max(50).optional().or(z.literal('')),
numero: z.string().min(1).max(99999).optional().or(z.literal('')),
bairro: z.string().min(2).max(50).optional().or(z.literal('')),
referencia: z.string().min(2).max(50).optional().or(z.literal('')),
complemento: z.string().min(2).max(50).optional().or(z.literal(''))
})

const {
register,
handleSubmit,
formState: { errors },
getValues,
setValue
} = useForm({
resolver: zodResolver(updateClienteSchema)
})

const { data } = useQuery(getClienteById, { variables: { id } })
const [sendUpdateCliente, { error: error2 }] = useMutation(updateCliente, {})

useEffect(() => {
console.log(error2)
}, [error2])

useEffect(() => {
setValue('_id', data?.cliente?._id)
setValue('bairro', data?.cliente?.bairro)
setAutoCep(data?.cliente?.cep)
setValue('cidade', data?.cliente?.cidade)
setValue('complemento', data?.cliente?.complemento)
setValue('cpf_cnpj', data?.cliente?.cpf_cnpj)
setValue('data_atualizacao', data?.cliente?.data_atualizacao)
setValue('data_registro', data?.cliente?.data_registro)
setValue('email', data?.cliente?.email)
setValue('excluido', data?.cliente?.excluido)
setValue('nome', data?.cliente?.nome)
setValue('numero', data?.cliente?.numero)
setValue('referencia', data?.cliente?.referencia)
setValue('rua', data?.cliente?.rua)
setStatus(data?.cliente?.status)
setValue('telefone', data?.cliente?.telefone)
setValue('uf', data?.cliente?.uf)
setValue('whatsapp', data?.cliente?.whatsapp)
}, [data])

useEffect(() => {
if (autoCep?.length === 8) {
;(async () => {
const response = await fetch(https://brasilapi.com.br/api/cep/v2/${autoCep})
if (response?.ok === true) {
const dados = await response?.json()
setValue('cep', autoCep)
setValue('cidade', dados?.city)
setValue('uf', dados?.state)
setAutoUf(dados?.state)
setValue('bairro', dados?.neighborhood)
setValue('rua', dados?.street)
}
})()
} else {
setValue('cidade', '')
setValue('uf', '')
setValue('bairro', '')
setValue('rua', '')
}
}, [autoCep])

useEffect(() => {
setValue('uf', autoUf)
}, [autoUf])

useEffect(() => {
setValue('status', status)
}, [status])

const handleUpdateCliente = async data => {
console.log(id)
console.log(data)
event.preventDefault()

try {
  const response = await sendUpdateCliente({
    variables: {
      id: id,
      data: data
    }
  })

  console.log('Salvou o cliente ✅', response)

  setOnSave(true)
  setShowSnackbar(true)
  setTimeout(() => {
    setShowSnackbar(false)
    setOnSave(false)
  }, 3000)
} catch (error) {
  console.error('Erro na mutação:', error)
}

}

return (

{showSnackbar && }
<CardHeader title='Editar Cliente' titleTypographyProps={{ variant: 'h6' }} />
<Divider sx={{ margin: 0 }} />





<Typography variant='body2' sx={{ fontWeight: 600 }}>
1. Dados e Permissões



<TextField
fullWidth
type='text'
label='Nome *'
id='Nome'
{...register('nome')}
helperText={errors.nome && {errors.nome.message}}
/>


<TextField
fullWidth
type='email'
label='E-mail'
id='E-mail'
{...register('email')}
helperText={errors.email && {errors.email.message}}
/>


<TextField
fullWidth
type='text'
label='Telefone'
id='Telefone'
{...register('telefone')}
helperText={errors.telefone && {errors.telefone.message}}
/>


<TextField
fullWidth
type='text'
label='WhatsApp'
id='WhatsApp'
{...register('whatsapp')}
helperText={errors.whatsapp && {errors.whatsapp.message}}
/>


<Divider sx={{ marginBottom: 0 }} />


<Typography variant='body2' sx={{ fontWeight: 600 }}>
2. Dados e Status



<TextField
fullWidth
type='text'
label='CPF/CNPJ'
id='cpf_cnpj'
{...register('cpf_cnpj')}
helperText={errors.cpfcnpj && {errors.cpfcnpj.message}}
/>



Status *
<Select
label='Status *'
defaultValue=''
id='status'
labelId='status-label'
value={status}
onChange={e => setStatus(e.target.value)}
helperText={errors.status && {errors.status.message}}
>
Ativo
Inativo




<Divider sx={{ marginBottom: 0 }} />


<Typography variant='body2' sx={{ fontWeight: 600 }}>
3. Endereço



<TextField
fullWidth
label='Cep'
type='text'
id='cep'
value={autoCep || getValues('cep')}
onChange={e => setAutoCep(e.target.value)}
helperText={errors.cep && {errors.cep.message}}
/>


<TextField
fullWidth
type='text'
id='cidade'
label='Cidade'
{...register('cidade')}
helperText={errors.cidade && {errors.cidade.message}}
/>



Estado
<Select
label='UF'
id='uf'
name='uf'
labelId='uf-label'
value={autoUf}
onChange={e => setAutoUf(e.target.value)}
helperText={errors.uf && {errors.uf.message}}
>
AC
AL
AP
AM
BA
CE
DF
ES
GO
MA
MT
MS
MG
PA
PB
PR
PE
PI
RJ
RN
RS
RO
RR
SC
SP
SE
TO




<TextField
fullWidth
type='text'
id='rua'
label='Rua'
{...register('rua')}
helperText={errors.rua && {errors.rua.message}}
/>


<TextField
fullWidth
type='number'
id='numero'
label='Número'
min='1'
max='999999'
step='1'
{...register('numero')}
helperText={errors.numero && {errors.numero.message}}
/>


<TextField
fullWidth
type='text'
id='bairro'
label='Bairro'
{...register('bairro')}
helperText={errors.bairro && {errors.bairro.message}}
/>


<TextField
fullWidth
type='text'
id='referencia'
label='Referência'
{...register('referencia')}
helperText={errors.referencia && {errors.referencia.message}}
/>


<TextField
fullWidth
type='text'
id='complemento'
label='Complemento'
{...register('complemento')}
helperText={errors.complemento && {errors.complemento.message}}
/>


<Divider sx={{ marginBottom: 0 }} />



<Divider sx={{ margin: 0 }} />
<CardActions sx={{ justifyContent: 'end' }}>

<Button size='large' type='submit' sx={{ mr: 2 }} variant='contained' disabled={onSave}>
Salvar




)
}

export default FormularioCadastro
`

Carregando publicação patrocinada...