Invalid hook call. Hooks can only be called inside of the body of a function component. - useContext

Question

I have created an empty object variable named workspacesData through the context api which is available globally across the app. I am trying to set my api data to the variable within the helper function that is below (getWorkspacesData).

This function getWorkspacesData is then being called on another page of the application for when the user wants to pull in the data and have it displayed on the page. Problem is when the user presses the button I get the error "Invalid hook call. Hooks can only be called inside of the body of a function component."

I know the issue is that I am using the useContext hook within this function, but how do I get around this issue? as I want to use the globally available variable to set the data to it.

getWorkspaces.js

import { useContext } from "react";
import { AppContext } from "../../../context/context";
import mavenlinkAPI from "../apiTools";

const GetWorkspaces = async (mavenlinkAccessToken) => {

    const {setWorkspacesData} = useContext(AppContext);

    try{
        const data = await mavenlinkAPI(
            'get',
            'workspaces?token='+mavenlinkAccessToken,
        );
        console.log(data)
        setWorkspacesData(data);
        
    } catch (error) {
        console.log(error)
    }

}

export default GetWorkspaces;

MavenlinkPage.jsx

import { Container, Grid, Paper } from '@mui/material';
import React, {useContext, useEffect, useRef, useState} from 'react';
import { getAuth } from "firebase/auth";
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import {SuccessSnackbar, ErrorSnackbar} from '../components/PopupSnackbar';
import { AppContext } from '../context/context';
import GetWorkspaces from '../helpers/api/mavenlink/getWorkspaces';
import GetTimesheets from '../helpers/api/mavenlink/getTimesheets';
import GetUsers from '../helpers/api/mavenlink/getUsers';
import CreateProject from '../helpers/api/mavenlink/createProject';
import GetMavenlinkAccessToken from '../helpers/api/mavenlink/getMavenlinkAccessToken';
import DummyDataHolder from '../components/dummyDataHolder';
// import { DataGrid } from '@material-ui/x-data-grid';


export const MavenlinkPage = () => {
    const { mavenlinkConnected } = useContext(AppContext);
    const [errorAlert, setErrorAlert] = useState(false);
    const [successAlert, setSuccessAlert] = useState(false);
    const { mavenlinkAccessToken, setMavenlinkAccessToken } = useContext(AppContext);

    const { workspacesData } = useContext(AppContext);


    const auth = getAuth();
    const user = auth.currentUser;
    const uid = user.uid

    const handleAlertClose = (event, reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSuccessAlert(false) && setErrorAlert(false);
    };

    useEffect(() => {
        if(mavenlinkConnected){
            GetMavenlinkAccessToken(setMavenlinkAccessToken);
        }
       
    }, [])

    console.log(mavenlinkAccessToken)

    return(
        <>
            <Container>
                <div className="mavenlink-page">
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <h1>Mavenlink</h1>
                        </Grid>
                        <Grid item xs={12}>
                            <Paper className="connection-status" elevation={1}>
                                    <h4 className="title">Connection Status:</h4>
                                    {!mavenlinkConnected ? <h4 className="response-error">{user.email} is not connected</h4> : <h4 className="response-success">{user.email} is connected</h4>}         
                            </Paper>
                        </Grid>
                        <Grid item xs={12}>
                            <Paper elevation={1}>
                                <h4>Get Workspaces</h4>
                                <Fab onClick={() => GetWorkspaces(mavenlinkAccessToken)} color="primary" aria-label="add">
                                    <AddIcon />
                                </Fab>
                                <h4>Get timesheets</h4>
                                <Fab onClick={() => GetTimesheets(mavenlinkAccessToken)} color="primary" aria-label="add">
                                    <AddIcon />
                                </Fab>
                                <h4>Get users</h4>
                                <Fab onClick={() => GetUsers(mavenlinkAccessToken)} color="primary" aria-label="add">
                                    <AddIcon />
                                </Fab>
                                <h4>Create project</h4>
                                <Fab onClick={() => CreateProject(mavenlinkAccessToken)} color="primary" aria-label="add">
                                    <AddIcon />
                                </Fab>
                            </Paper>
                        </Grid>
                        <Grid item xs={12}>
                        <Paper elevation={10} style={{ height: 400, width: '100%' }}>
                            {workspacesData != null ? 
                                Object.keys(workspacesData).map((item, index) => {
                                    return(
                                        <div key={index}>
                                            {workspacesData[item].map((m, ind) =>
                                                <div key={ind}>{item}</div>
                                            
                                            )}

                                        </div>
                        
                                    )

                                })
                            :
                                <div></div>
                             }
                        </Paper>
                        </Grid>
                    </Grid>
                </div>
                {successAlert === true ? <SuccessSnackbar open={successAlert} handleClose={handleAlertClose}/> : <></> }
                {errorAlert === true ? <ErrorSnackbar open={errorAlert} handleClose={handleAlertClose}/> : <></> }
            </Container>
        </>
    );
};

Answer 1

You can call the hook inside your component and pass the returned value from it to the function:

const getWorkspaces = async (mavenlinkAccessToken, onSuccess) => {

    try{
        const data = await mavenlinkAPI(
            'get',
            'workspaces?token='+mavenlinkAccessToken,
        );

        onSuccess?.(data)
        
    } catch (error) {
        console.log(error)
    }

}

And call it as:

export const MavenlinkPage = () => {
   const { setWorkspacesData } = useContext(AppContext);
   ...

   onClick={() => getWorkspaces(mavenlinkAccessToken, setWorkspacesData )}
}

Or create a custom hook:

const useGetWorkspaces = (mavenlinkAccessToken) => {
  const { setWorkspacesData } = useContext(AppContext);
    return async () => {

    try{
        const data = await mavenlinkAPI(
            'get',
            'workspaces?token='+mavenlinkAccessToken,
        );

        setWorkspacesData(data);

    } catch (error) {
        console.log(error)
    }
  }
}

And use it like:

export const MavenlinkPage = () => {
   const getWorkspaces = useGetWorkspaces(mavenlinkAccessToken);
   ...

   onClick={() => getWorkspaces()}
}