Next.js Discord

Discord Forum

Why is the saveToDB function executing before the getImage function promise is completed

Answered
Carpathian Shepherd Dog posted this in #help-forum
Open in Discord
Carpathian Shepherd DogOP
How can I make sure the saveToDB function executes after the getImage function, given that getImage does long polling?

GET IMAGE FUNCTION
export const getImage = async (
  messageId: string,
  setProgress: (newProgressValue: number) => void,
  setImageURL: (newImageURL: string) => void,
  setMultiImageURL: (newMultiImageURL: string[]) => void,
  setMessageID: (newMessageID: string) => void,
  setMessageBtnID: (newMessageBtnID: string) => void
) => {
  // if messageId is undefined then just return
  if (!messageId) {
    return;
  }

  const response = await fetch(`api-url`);
  const data = await response.json();
  const { progress: innerProgress, response: getImageResponse } = data;

  if (innerProgress === 0) {
    setProgress(9);
  } else {
    setProgress(innerProgress as number);
  }

  if (innerProgress === 100) {
    setImageURL(getImageResponse.imageUrl);
    setMultiImageURL(getImageResponse.imageUrls);
    setMessageID(getImageResponse.originatingMessageId);
    setMessageBtnID(getImageResponse.buttonMessageId);
    return getImageResponse;
  } else {
    setTimeout(
      async () =>
        await getImage(
          messageId,
          setProgress,
          setImageURL,
          setMultiImageURL,
          setMessageID,
          setMessageBtnID
        ),
      5000
    );
  }
};


MAIN CODE
const getImageResponse = await getImage(
      messageId,
      setProgress,
      setImageURL,
      setMultiImageURL,
      setMessageID,
      setMessageBtnID
    );
    await saveToDB(
      getImageResponse!.imageUrl,
      getImageResponse!.imageUrls,
      getImageResponse!.originatingMessageId,
      getImageResponse!.buttonMessageId
    );
Answered by Ray
oh ok try this
export const getImage = async (
  messageId: string,
  setProgress: (newProgressValue: number) => void,
  setImageURL: (newImageURL: string) => void,
  setMultiImageURL: (newMultiImageURL: string[]) => void,
  setMessageID: (newMessageID: string) => void,
  setMessageBtnID: (newMessageBtnID: string) => void,
) => {
  // if messageId is undefined then just return
  if (!messageId) {
    return;
  }

  while (true) {
    const response = await fetch(`api-url`);
    const data = await response.json();
    const { progress, response: getImageResponse } = data;

    if (progress >= 100) {
      setImageURL(getImageResponse.imageUrl);
      setMultiImageURL(getImageResponse.imageUrls);
      setMessageID(getImageResponse.originatingMessageId);
      setMessageBtnID(getImageResponse.buttonMessageId);
      return getImageResponse;
    }

    setProgress((progress || 9) as number);
  }
};
View full answer

7 Replies

@Carpathian Shepherd Dog How can I make sure the saveToDB function executes after the getImage function, given that getImage does long polling? **GET IMAGE FUNCTION** ts export const getImage = async ( messageId: string, setProgress: (newProgressValue: number) => void, setImageURL: (newImageURL: string) => void, setMultiImageURL: (newMultiImageURL: string[]) => void, setMessageID: (newMessageID: string) => void, setMessageBtnID: (newMessageBtnID: string) => void ) => { // if messageId is undefined then just return if (!messageId) { return; } const response = await fetch(`api-url`); const data = await response.json(); const { progress: innerProgress, response: getImageResponse } = data; if (innerProgress === 0) { setProgress(9); } else { setProgress(innerProgress as number); } if (innerProgress === 100) { setImageURL(getImageResponse.imageUrl); setMultiImageURL(getImageResponse.imageUrls); setMessageID(getImageResponse.originatingMessageId); setMessageBtnID(getImageResponse.buttonMessageId); return getImageResponse; } else { setTimeout( async () => await getImage( messageId, setProgress, setImageURL, setMultiImageURL, setMessageID, setMessageBtnID ), 5000 ); } }; **MAIN CODE** ts const getImageResponse = await getImage( messageId, setProgress, setImageURL, setMultiImageURL, setMessageID, setMessageBtnID ); await saveToDB( getImageResponse!.imageUrl, getImageResponse!.imageUrls, getImageResponse!.originatingMessageId, getImageResponse!.buttonMessageId );
Ray
because you use setTimeout to make getImage run in next 5 sec?
@Ray because you use `setTimeout` to make `getImage` run in next 5 sec?
Carpathian Shepherd DogOP
ah ok, how would i rewrite that so that the function itself does long polling and then after the long polling is finished, it calls the saveToDB function?
Ray
  await new Promise(resolve => setTimeout(resolve, 5000))
@Ray ts await new Promise(resolve => setTimeout(resolve, 5000))
Carpathian Shepherd DogOP
i tried this, it didnt work. what im trying to do with this function is to call an api multiple times, and if the value i get from it is 100, then i return the data, else i call the function again to get more data from the api
Ray
oh ok try this
export const getImage = async (
  messageId: string,
  setProgress: (newProgressValue: number) => void,
  setImageURL: (newImageURL: string) => void,
  setMultiImageURL: (newMultiImageURL: string[]) => void,
  setMessageID: (newMessageID: string) => void,
  setMessageBtnID: (newMessageBtnID: string) => void,
) => {
  // if messageId is undefined then just return
  if (!messageId) {
    return;
  }

  while (true) {
    const response = await fetch(`api-url`);
    const data = await response.json();
    const { progress, response: getImageResponse } = data;

    if (progress >= 100) {
      setImageURL(getImageResponse.imageUrl);
      setMultiImageURL(getImageResponse.imageUrls);
      setMessageID(getImageResponse.originatingMessageId);
      setMessageBtnID(getImageResponse.buttonMessageId);
      return getImageResponse;
    }

    setProgress((progress || 9) as number);
  }
};
Answer
Ray
@Carpathian Shepherd Dog does the code work?
Carpathian Shepherd DogOP
yes it works thanks!