useEffect fetching

Answered

Siamese posted this in #help-forum

SiameseOP

2024-03-24T21:09:16.000Z

the loading state is set to false before other data. without the controller it works fine

useEffect(() => {
    const controller = new AbortController();

    axios.get(`/api/db/custombot?guild=${guildID}`, {signal: controller.signal})
    .then(function (response: any) {
      setAvatar(response?.data.avatar);
      setName(response?.data.name);
      setActivityValue(response?.data.activity);
      setActivityType(activityOptions.find((x) => x.value === response?.data.activityType));
      setStatusType(options.find((x) => x.value === response?.data.status));
    }).catch(error => {
      if (error.response?.status === 401) router.push(error.response?.data.redirect);
    }).finally(() => setLoading(false));

    return () => controller.abort();
  }, [guildID]);

Answered by Siamese

final code

useEffect(() => {
    const controller = new AbortController();

    axios.get(`/api/db/custombot?guild=${guildID}`, {signal: controller.signal})
    .then(function (response: any) {
      if (response) {
        setAvatar(response.data.avatar);
        setName(response.data.name);
        setActivityValue(response.data.activity);
        setActivityType(activityOptions.find((x) => x.value === response.data.activityType));
        setStatusType(options.find((x) => x.value === response.data.status));
      }
    }).catch(error => {
      if (error.response?.status === 401) router.push(error.response?.data.redirect);
    }).finally(() => {
      if (!controller.signal.aborted) setLoading(false);
    });

    return () => controller.abort();
  }, [guildID]);

View full answer

14 Replies

Common paper wasp

2024-03-24T22:01:21.000Z

you sure you don't have any errors in catch block?

@Common paper wasp you sure you don't have any errors in catch block?

SiameseOP

2024-03-24T22:25:18.000Z

nope

When I remove the abort controller the issue I got goes away

SiameseOP

2024-03-25T09:53:20.000Z

@Siamese When I remove the abort controller the issue I got goes away

Ray

2024-03-25T09:54:35.000Z

try this

useEffect(() => {
    setLoading(true)
    const controller = new AbortController();

    axios.get(`/api/db/custombot?guild=${guildID}`, {signal: controller.signal})
    .then(function (response: any) {
      setAvatar(response?.data.avatar);
      setName(response?.data.name);
      setActivityValue(response?.data.activity);
      setActivityType(activityOptions.find((x) => x.value === response?.data.activityType));
      setStatusType(options.find((x) => x.value === response?.data.status));
    }).catch(error => {
      if (error.response?.status === 401) router.push(error.response?.data.redirect);
    }).finally(() => setLoading(false));

    return () => controller.abort();
  }, [guildID]);

SiameseOP

2024-03-25T09:55:17.000Z

So you set the set loading to true, right? No more changes?

Because I made the loading state be true by default

Ray

2024-03-25T09:55:37.000Z

yes

SiameseOP

2024-03-25T09:56:00.000Z

Alright. I will test it soon

@Ray yes

SiameseOP

2024-03-25T11:00:53.000Z

Didn't help

if (response) setLoading(false);

this solved

so it set loading to false even for the aborted request

SiameseOP

2024-03-25T11:08:21.000Z

final code

useEffect(() => {
    const controller = new AbortController();

    axios.get(`/api/db/custombot?guild=${guildID}`, {signal: controller.signal})
    .then(function (response: any) {
      if (response) {
        setAvatar(response.data.avatar);
        setName(response.data.name);
        setActivityValue(response.data.activity);
        setActivityType(activityOptions.find((x) => x.value === response.data.activityType));
        setStatusType(options.find((x) => x.value === response.data.status));
      }
    }).catch(error => {
      if (error.response?.status === 401) router.push(error.response?.data.redirect);
    }).finally(() => {
      if (!controller.signal.aborted) setLoading(false);
    });

    return () => controller.abort();
  }, [guildID]);

Answer