1

#Reactjs #Nextjs #Typescript #useQuery

Fala pessoal! Irei mostrar como utilizei o useQuery para fazer requisição a minha API. Utilizei no formulário de endereço do usuário.

Exemplo com formulário

No curto vídeo mostro o funcionamento em produção. O vídeo está em um post no meu linkedin: Vídeo

Implementação

Na página Address, utilizo a função prefetchQuery para buscar dados do usuário antes que o componente seja renderizado. Isso garante que os dados estejam prontos e disponíveis quando o usuário acessar a página:

export default async function Address() {
  const token = getAccessTokenFromCookies();

  if (!token) {
    return <NoUserMessage />;
  }

  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['addressData'],
    queryFn: () => getDataUserAddress(),
    staleTime: 1000 * 60 * 60 * 24, // 24 hours
  });

  return (
    <div className="p-2 pt-28">
      <DataCreditCardTest />
      <h1 className="font-bold">Preencha corretamente o local de entrega</h1>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <FormAddress />
      </HydrationBoundary>
    </div>
  );
}

Hook

No componente FormAddress, uso um hook customizado useAddressForm que, por sua vez, utiliza useQuery para buscar os dados do endereço do usuário. Esses dados é pego do cache, pois tais dados já foram requisitados no prefetchQuery no código anterior, também utilizo o useMutation, ambos importei da lib TanStack Query. TanStack Query

export function useAddressForm() {
  const { notifySuccess, notifyError } = useNotification()

  const { data, refetch } = useQuery({
    queryKey: ['addressData'],
    queryFn: () => getDataUserAddress(),
    staleTime: 1000 * 60 * 60 * 24, // 24 hours
  })
  
  const mutation = useMutation({
    mutationFn: async ({
      addressFormData,
      operation,
    }: {
      addressFormData: AddressFormData
      operation: 'create' | 'update'
    }) => {
      const result = 
      operation === 'create' 
      ? await createUserAddress(addressFormData)
	  : await updateUserAddress(addressFormData)

      if (result.success) {
        notifySuccess({ message: result.message, origin: 'server' })
        refetch()
      } else {
        notifyError({ message: result.message, origin: 'server' })
      }
    },
  })

  async function handleAddressForm(addressFormData: AddressFormData) {
    const previousAddress = data?.userAddress

    const { isSameData } = hasDataChangedDataAddress(
      addressFormData,
      data?.userAddress,
    )

    if (isSameData) {
      notifyError({
        message: 'Não há alterações para salvar',
        origin: 'client',
      })
      return
    }

    mutation.mutate({
      addressFormData,
      operation: previousAddress ? 'update' : 'create',
    })
  }
  ...