CODEWITHSUNDEEP
react-hooksuse-effect
robertwerner_sf
robertwerner_sf

Reputation: 1313

Can the completion of one async call be sequenced before the start of another using useEffect?

I'm trying to use useEffect in my React app but also refactor things more modularly. Shown below is the heart of actual working code. It resides in a Context Provider file and does the following: 1. Calls AWS Amplify to get the latest Auth Access Token. 2. Uses this token, in the form of an Authorization header, when an Axios GET call is made to an API Endpoint.

This works fine but I thought it would make more sense to move Step #1 into its own useEffect construct above. Furthermore, in doing so, I could then also store the header object as its own Context property, which the GET call could then reference.

Unfortunately, I can now see from console log statements that when the GET call starts, the Auth Access Token has not yet been retrieved. So the refactoring attempt fails.

  useEffect(() => {
    const fetchData = async () => {
      const config = {
        headers: { "Authorization":  
          await Auth.currentSession()
            .then(data => {
              return data.getAccessToken().getJwtToken();
            })
            .catch(error => {
              alert('Error getting authorization token: '.concat(error))
            })
          }};

      await axios.get('http://127.0.0.1:5000/some_path', config)
        .then(response => {
          // Process the retrieved data and populate in a Context property

        })
        .catch(error => {
          alert('Error getting data from endpoint: '.concat(error));
        });
    };

    fetchData();
  }, [myContextObject.some_data]);

Is there a way of refactoring my code into two useEffect instances such that the first one will complete before the second one starts?

Upvotes: 1

Views: 47

Answers (1)

Alvaro
Alvaro

Reputation: 9672

You could hold the config object in a state. This way you can separate both fetch calls and trigger the second one once the first one finished:

const MyComponent = props => {
    const myContextObject = useContext(myContext);
    const [config, setConfig] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const config = {
                headers: {
                    Authorization: await Auth.currentSession()
                        .then(data => {
                            return data.getAccessToken().getJwtToken();
                        })
                        .catch(error => {
                            alert("Error getting authorization token: ".concat(error));
                        })
                }
            };

            setConfig(config);
        };

        fetchData();
    }, [myContextObject.some_data]);

    useEffect(() => {
        if (!config) {
            return;
        }

        const fetchData = async () => {
            await axios
                .get("http://127.0.0.1:5000/some_path", config)
                .then(response => {
                    // Process the retrieved data and populate in a Context property
                })
                .catch(error => {
                    alert("Error getting data from endpoint: ".concat(error));
                });
        };

        fetchData();
        // This should work for the first call (not tested) as it goes from null to object.
        // If you need subsequent changes then youll have to track some property
        // of the object or similar
    }, [config]);

    return null;
};

Upvotes: 1

Related Questions