特定的 GraphQL 查询获取正在被取消

Question

过去几个月我一直在使用graphql做一个项目，从来没有遇到过这个问题。这个特定的查询只能运行一次，但现在每次获取这个查询时，结果数据都是不确定的。在开发工具的网络选项卡中，我可以看到状态为

(canceled)

。当我在 apollo 客户端开发工具中运行完全相同的查询时，它工作得很好，甚至在网络选项卡中获得

200

状态

这是发生实际问题的文件

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>
);

我不确定它会有多大用处，但下面我附上了请求失败和请求成功时间的图片

成功

()

不成功

()