API is not calling on first render, only after I manually re-render React app

Question

I am calling the Azure Optical Character Recognition API in my React app that requires an initial POST request to get an 'operation-location' value from the response header. The 'operation-location' value is then used to make a GET request.

The API takes an url to an image with text and returns the plain text from the image.

The issue I am facing is that the POST request is only successful when I manually re-render the React app. I submit this url https://i.stack.imgur.com/i1Abv.png via the UI I have created, both POST and GET requests fail but they will only be successful when I hit ctrl + S on the development environment.

When I log the 'operation-location' value on the first render, it returns null so the GET request is made to http://localhost:5173/null and so it fails. But, when I manually re-render the app by hitting save, both API calls are successful and the getText variable is rendered.

getText is a stateful variable that I am updating with the text from the image

I am trying to make it so it is successful on the first load.

On the first render, I get an error TypeError: Cannot read properties of undefined (reading 'analyzeResult') when trying to resolve .then((json)=> { within the getData function

The POST request takes a user input in the body of the request from props.UserUrl which comes from the file Homepage.jsx:

import {React, useState} from 'react'
import Api from './Api';

export default function Homepage(props){
const [isClicked, setIsClicked] = useState(false)
const [input, setInput] = useState('');
const [text, setText] = useState('')

function handleChange (e) {
    setInput(e.target.value)
}

function handleClick(){
    setText(input)
    setIsClicked(true);

} 
        {if (isClicked == true){
            return (
                <div>
                     <Api UserUrl={text}/>
                </div>             
            )
        } else {
            return (
                <div className="image-input">
                    <input type="text" placeholder='enter url you want to convert' onChange={handleChange}/>
                    <button onClick={handleClick}>Submit</button>
                    </div>
                    )
        }
        }

}

The API is called in Api.jsx:

import { React, useState, useEffect } from 'react';

export default function Api(props) {
  // Need this unique value to send the GET request. We receive it from the POST request
  const [operationLocation, setOperationLocation] = useState(null);

 
  // We will add the text from the image to this variable
  const [getText, setGetText] = useState(null);

  const [userUrl, setUserUrl] = useState('');

  const [loading, setLoading] = useState(false);

  const [responseHeaders, setResponseHeaders] =useState ({})


  // We make a POST request to this URL
  let url = `${import.meta.env.VITE_ENDPOINT}.cognitiveservices.azure.com/vision/v3.2/read/analyze`;
  // Options for POST request
  const options = {
    // Change the image url to any you like that has text
    body: (JSON.stringify({ "url": props.UserUrl })),
    headers: {
      // Need to set this parameter or else won't work due to CORS
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      // This is the value we need to get in the header request
      "Access-Control-Expose-Headers": "operation-location",
      "Content-Type": "application/json",
      "Ocp-Apim-Subscription-Key": import.meta.env.VITE_API_KEY
    },
    method: "POST",
    mode: 'cors',
    credentials: "same-origin"
  };


  // Options for Get request
  const optionsGet = {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      'Accept': 'application/json',
      "Content-Type": "application/json",
      "Ocp-Apim-Subscription-Key": import.meta.env.VITE_API_KEY
    },
    method: "GET",
    mode: 'cors',
    credentials: "same-origin"
  };

  useEffect(()=> {
    // Post request
    const fetchData = async () => {
      setLoading(true)
      fetch(url, options)
      // Setting the operation location value from the header
      .then((res) => {
        return setOperationLocation(res.headers.get('operation-location'))
      })   
      // On first render, operationLocation value is not being returned, returns null
       .then(console.log(operationLocation))
         }
        
        // Get request
      const getData = () => {
        // Passing the operation location value from the POST request into our GET request
        fetch(operationLocation, optionsGet)
        .then((res) => {
          if (res.ok) {
            return res.json()
          }    
        })
        .then((json)=> {
          // The response returns an array of text. The text gets broken up into multiple lines
          const textArray = json.analyzeResult.readResults[0].lines;
          // Map through the response to get each individual text
          const textOutput = textArray.map(item => item.text) //returns an array
          // Use the join method to get rid of the commas in the array so it returns a string
          const textOutputString = textOutput.join(' ')
          setGetText(textOutputString)
  
          setLoading(false)
        })
        .catch(err => {
          console.log(err)
        })
        
      }  
    // Asyncrhonously make the requests. We need to wait for response from the POST request before we execute the GET request
      async function callApi () {

        await fetchData ()
        console.log('post request successful')
        console.log(operationLocation)
        await getData()
        console.log('get request succesful')
      setLoading(false)
    } 
      callApi();
  
  }, [props.UserUrl])
  
  // We check to see if the request has populate state and then we render the response
  if (loading) {
      return (
       <div>
        Loading...
       </div>
      )} else {
        return (
           <div className="center">
        <p>{getText}</p>
      <p>{props.UserUrl}</p>
    </div>
        )
      }
    }

What I have tried:

• The url for the POST request is correct because it will render successfully in its second render. I have moved it to a .env variable because the endpoint is sensitive
• I have tried to make the GET request asynchronous but I am not sure if GET request is being made before the POST request is successful. On checking the network tab, it looks like the POST request takes 956ms to be successful.
• I don't think it's a CORS problem because I have set the mode to CORS and also I have used an Edge plugin to disable CORS and I was still having the same problem
• I have tried using a stateful variable called loading to re-render React on API call but still facing same issue of it only working on a manual re-render
• I have tried using a stateful variable called data to re-render React on API call but still facing same issue of it only working on a manual re-render
• I tried using props.UserUrl as a stateful variable but was running into an endless loop
• I have tried using a stateful variable to capture the responseHeaders to force the API to re-render but I was still facing the same issues
• I added operationLocation value to the useEffect array but it created an endless loop
• I have tried using location.reload() to re-render React but it just reloaded back to the initial UI and lost the data

I think I need to force React to re-render someway but I don't know how.

Edit: Solution

The problem was that I was using operationLocation in state which meant it was not updating on the first render. It meant that on the first render, the value was null and so the getData method was making a request to null.

By declaring operationLocation as a non stateful variable and hoisting it, I mutate its value in the fetchData method.

I looked again at the JavaScript SDK for this API from Microsoft https://learn.microsoft.com/en-us/azure/cognitive-services/Computer-vision/quickstarts-sdk/client-library?pivots=programming-language-javascript&tabs=visual-studio

It mentions using a while loop that waits for the text to be read. Instead of using this, I used a setTimeout function when calling getData so that it is being called after the text from the image has been read.

See the API code here:

import { React, useState, useEffect } from 'react';

export default function Api(props) {

  let operationLocation;

  // We will add the text from the image to this variable
  const [getText, setGetText] = useState(null);

  const [loading, setLoading] = useState(false);

  const [resStatusForGetReq, setStatusForGetReq] = useState()


  // We make a POST request to this URL
  let url = `${import.meta.env.VITE_ENDPOINT}.cognitiveservices.azure.com/vision/v3.2/read/analyze`;
  // Options for POST request
  const options = {
    // Change the image url to any you like that has text
    body: (JSON.stringify({ "url": props.UserUrl })),
    headers: {
      // Need to set this parameter or else won't work due to CORS
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      // This is the value we need to get in the header request
      "Access-Control-Expose-Headers": "operation-location",
      "Content-Type": "application/json",
      "Ocp-Apim-Subscription-Key": import.meta.env.VITE_API_KEY
    },
    method: "POST",
    mode: 'cors',
    credentials: "same-origin"
  };


  // Options for Get request
  const optionsGet = {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
      'Accept': 'application/json',
      "Content-Type": "application/json",
      "Ocp-Apim-Subscription-Key": import.meta.env.VITE_API_KEY
    },
    method: "GET",
    mode: 'cors',
    credentials: "same-origin"
  };

  useEffect(() => {
    // Post request
    const fetchData = async () => {
      setLoading(true)

        fetch(url, options)
          // Setting the operation location value from the header
          .then((res) => {       
            return operationLocation = (res.headers.get('operation-location'))     
          })

    }

    // Get request
    const getData = async () => {
      console.log(operationLocation)
      // Passing the operation location value from the POST request into our GET request
      fetch(operationLocation, optionsGet)
        .then((res) => {
          setStatusForGetReq(res.status)
          if (res.ok) {
            return res.json()
          }
        })
        .then((json) => {
          // The response returns an array of text. The text gets broken up into multiple lines
          const textArray = json.analyzeResult.readResults[0].lines;
          // Map through the response to get each individual text
          const textOutput = textArray.map(item => item.text) //returns an array
          // Use the join method to get rid of the commas in the array so it returns a string
          const textOutputString = textOutput.join(' ')
          setGetText(textOutputString)

          setLoading(false)
        })
        .catch(err => {
          console.log(err)
        })

    }
    // Asyncrhonously make the requests. We need to wait for response from the POST request before we execute the GET request
    async function callApi() {
        fetchData()
      console.log('post request successful')
      // Need to wait for read response before we call the GET request
      setTimeout(()=> {
        getData()
      }, 2000)
        

      console.log('get request succesful')

    }
    callApi();

  }, [])

  // We check to see if the request has populate state and then we render the response
  if (loading) {
    return (
      <div>
        Loading...

      </div>
    )
  } else {
    return (
      <div className="center">
        <p>{getText}</p>
        <p>{props.UserUrl}</p>
      </div>
    )
  }
}

Answer 1

add the POST request in another useEffect with no dependency so the useEffect will run only once when the app load first time

 useEffect(()=> {
    // Post request
    const fetchData = async () => {
      setLoading(true)
      fetch(url, options)
      // Setting the operation location value from the header
      .then((res) => {
        return setOperationLocation(res.headers.get('operation-location'))
      })   
      // On first render, operationLocation value is not being returned, returns null
       .then(console.log(operationLocation))
         }
  
  }, [])


 useEffect(()=> {
        // Get request
      const getData = () => {
        // Passing the operation location value from the POST request into our GET request
        fetch(operationLocation, optionsGet)
        .then((res) => {
          if (res.ok) {
            return res.json()
          }    
        })
        .then((json)=> {
          // The response returns an array of text. The text gets broken up into multiple lines
          const textArray = json.analyzeResult.readResults[0].lines;
          // Map through the response to get each individual text
          const textOutput = textArray.map(item => item.text) //returns an array
          // Use the join method to get rid of the commas in the array so it returns a string
          const textOutputString = textOutput.join(' ')
          setGetText(textOutputString)
  
          setLoading(false)
        })
        .catch(err => {
          console.log(err)
        })
        
      }  
    // Asyncrhonously make the requests. We need to wait for response from the POST request before we execute the GET request
      async function callApi () {

        await fetchData ()
        console.log('post request successful')
        console.log(operationLocation)
        await getData()
        console.log('get request succesful')
      setLoading(false)
    } 
      callApi();
  
  }, [props.UserUrl])