Essa será uma aplicação onde o principal objetivo criar Upload de imagens
- Infinite Queries e Mutations com React Query;
- Envio de formulário com React Hook Form;
- Exibição de Modal e Toast com Chakra UI;
- Entre outros.
No useInfiniteQuery foi montar duas seções principais:
- Uma função que recebe como parâmetro um objeto que contêm a propriedade
pageParam
(caso o parâmetro não exista, utilize comodefault
o valornull
). Esse parâmetro é utilizado no momento da requisição para chamarmos uma próxima página. Já no corpo da função, deve realizar uma requisição GET para a rota/api/images
da API do Next.js informando como umquery param
de nomeafter
o valor dopageParam
e retornar os dados recebidos. - Uma função chamada
getNextPageParam
que recebe como parâmetro o resultado da última requisição. Se o valorafter
retornado na última requisição existir, então você deve retornar esse valor, caso contrário retornenull
.
Outro passo importante a se fazer é formatar os dados recebidos do React Query da forma que a aplicação espera. Portanto, no formattedData
é preciso utilizar o map
e o flat
para que transforme o data
(um objeto com mais informações do que o seu CardList.tsx
precisa) em um array de objetos apenas com as informações necessárias.
useInfiniteQuery
, dê uma olhada nesse trecho da doc oficial
Nesse componet, tem quatro etapas principais que foi implementada:
- As validações do formulário;
- A
mutation
do React Query; - A função
onSubmit
; - O registro dos inputs no React Hook Form.
Começando pelas validações, criado um objeto formValidations
com as propriedades image
, title
e description
. Essas propriedades representam cada um dos três inputs do formulário e é dentro delas que foi declarada as validações desses inputs. As validações são:
- image:
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
Arquivo obrigatório
- validate: Como as outras duas validações são customizadas, ou seja, não tem por padrão no React Hook Form, iremos criá-las manualmente com o
validate
.- lessThan10MB: O tamanho do arquivo não pode exceder 10 MB. Utilize a propriedade
size
do arquivo de imagem para realizar a comparação. A mensagem de erro deve serO arquivo deve ser menor que 10MB
. - acceptedFormats: O arquivo enviado pelo usuário deve ser um dos três tipos: image/jpeg, image/png ou image/gif. Utilize a propriedade
type
do arquivo de imagem e umregex
com os tipos aceitos para realizar a comparação. A mensagem de erro deve serSomente são aceitos arquivos PNG, JPEG e GIF
.
- lessThan10MB: O tamanho do arquivo não pode exceder 10 MB. Utilize a propriedade
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
- title:
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
Título obrigatório
- minLength: O tamanho mínimo da string deve ser de 2 caracteres. A mensagem de erro deve ser
Mínimo de 2 caracteres
. - maxLength: O tamanho máximo da string deve ser de 20 caracteres. A mensagem de erro deve ser
Máximo de 20 caracteres
.
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
- description:
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
Descrição obrigatória
- maxLength: O tamanho máximo da string deve ser de 65 caracteres. A mensagem de erro deve ser
Máximo de 65 caracteres
.
- required: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser
Nesse arquivo é a mutation
do React Query. Essa mutation
será responsável pelo cadastro da nova imagem no FaunaDB. Portanto, como primeiro argumento do useMutation
, implementar uma função que recebe como parâmetro os dados do formulário e no seu corpo realizar uma requisição POST para a rota api/images
enviando os dados recebidos.
Já como segundo parâmetro,irá utilizar a propriedade onSuccess
da mutation
para que, caso ela ocorra com sucesso, invalidade a query
que listou as imagens, forçando o React Query a atualizar esses dados. Para isso, com o método invalidateQueries
.
Por fim, é preciso implementar a função onSubmit
. Essa função recebe como argumento os dados do formulário de cadastro da imagem. No corpo da função, três seções:
- try: Nesse trecho se concentrar em três etapas:
- Verificar se o
imageUrl
existe. Se não existir, mostrar umtoast
de informação com o títuloImagem não adicionada
e descriçãoÉ preciso adicionar e aguardar o upload de uma imagem antes de realizar o cadastro.
e sair imediatamente da função. Caso exista, basta seguir para as próximas etapas. - Executar a
mutation
utilizando omutateAsync
para pode aguardar o resultado da Promisse. - Mostrar um
toast
de sucesso com o títuloImagem cadastrada
e descriçãoSua imagem foi cadastrada com sucesso.
- Verificar se o
- catch: Nesse trecho deve mostrar um
toast
de erro com o títuloFalha no cadastro
e descriçãoOcorreu um erro ao tentar cadastrar a sua imagem.
- finally: Nesse trecho deve limpar os campos do form, os estados do componente e fechar o modal.