T
TanStack•6mo ago
harsh-harlequin

displaying loader spinner when uploading images (isLoading)

Hii folks! 👋 I'm newbie in TanStack Query and I would have a question related to displaying the loader spinner on PhotoUploader component during the process of uploading a photo that the user chooses. The thing is also that I use a hook useGetAllImages where there is an allImagesLoading state which is initially 'false' if I understood correctly. 
import { useQuery } from '@tanstack/react-query';
import { getAllImages } from '../api/uploads';

export const useGetAllImages = (id: string) => {
  const {
    data: allImages,
    error: allImagesError,
    isPending: allImagesLoading,
  } = useQuery({
    queryKey: ['uploads', 'avatar', id],
    queryFn: () => getAllImages(id),
    enabled: !!id,
  });

  return { allImages, allImagesError, allImagesLoading };
};
import { useQuery } from '@tanstack/react-query';
import { getAllImages } from '../api/uploads';

export const useGetAllImages = (id: string) => {
  const {
    data: allImages,
    error: allImagesError,
    isPending: allImagesLoading,
  } = useQuery({
    queryKey: ['uploads', 'avatar', id],
    queryFn: () => getAllImages(id),
    enabled: !!id,
  });

  return { allImages, allImagesError, allImagesLoading };
};
Now I would like to use this hook in the component where the upload takes place, i.e. for the spinner to appear at the moment of data fetching (true) and when the fetch is finished to become false again. How could I do that? Thanks in advance! :reactcharts:
2 Replies
robust-apricot
robust-apricot•6mo ago
sounds like this should be posted in #react-query-questions ?
harsh-harlequin
harsh-harlequinOP•6mo ago
I already did https://discord.com/channels/719702312431386674/1351349921110032556 @Manuel Schiller can you help me in some way here?

Did you find this page helpful?