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 `