specific GraphQL query fetch's are being cancelled

Question

I've been using graphql for a project for the past few months and have never run into this problem. This specific query was able to run only once but now every time this query is fetched the resulting data is undefined. In the network tab of dev tools I can see that the status is (canceled). When I run the exact same query in the apollo client dev tool it works perfectly fine and even gets a 200 status in the network tab

Here's the file where the actual problem is happening

const Saved_activities = (props) => {
    const [user_id, setUser_id] =                   useState("");
    const [status, setStatus] =                     useState("loading");
    const [activity_status, setActivity_status] =   useState("loading");
    const [activities, setActivities] =             useState([]);
    const email = props.email

    //changes status when the query completes without error
    const update_status = () => {
        setStatus("complete")
    }

    //finds the trip user with the given email 
    const {loading: user_loading, error: user_error, data: user_data} = useQuery(GET_TRIP_USER_BY_EMAIL, {
        variables: {email: email},
        onCompleted: update_status 
    })

    //grabs the user id from the only item in the get_trip_user query
    useEffect(() => {
      if(status == "complete"){
        console.log(user_data)
        setUser_id(user_data.trip_user[0].user_id)
      }
    }, [status])

    //finds all the items in the saved activities table that have a given user_id
    const [get_activities, {loading: activity_loading, error: activity_error, data: activity_data}] = useLazyQuery(GET_SAVED_ACTIVITY_BY_USER)
   
    //once the user_id is changed to an actual id in db, run the above query
    useEffect(() => {
      if(user_id != ""){
        get_activities({variables: {user_id: 1}, onCompleted: setActivity_status("complete")})
      }
    }, [user_id])
    
    //once the above query has finished, grab all items in the returned list
    useEffect(() => {
      if(activity_status == "complete"){
        console.log("activity data")
        console.log("here be the user id " + user_id)
        console.log(activity_data) // returns undefined
        setActivities(activity_data.saved_activity)
      }
    }, [activity_status])
...

index.js

const db_authLink = setContext((_, { headers }) => {
    return {
    headers: {
         ...headers, 'x-hasura-admin-secret': 'not telling ;)'
       }
     }
   });

const db_httpLink = createHttpLink({
    uri: 'https://generic-name.hasura.app/v1/graphql',
});

const db_client = new ApolloClient({
    cache: new InMemoryCache(),
    link: db_authLink.concat(db_httpLink),
    connectToDevTools: true
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ApolloProvider client ={db_client}>
        <App /> // contains Saved_activities
    </ApolloProvider>
);

I'm not sure how useful it'll be but below I've attached pictures of the timing of a failed request and a successful request

successful

(https://i.stack.imgur.com/3onlk.png)

unsuccessful

(https://i.stack.imgur.com/9pgzD.png)