problem with using apollo client mutate outside render - reactjs

Question

I want to have a custom component named AuthRoute not only to check if certain data is available in redux but also verify token with graphql
here is what I've done :
const AuthRoute = ({ component: Component, authUser, ...rest }) => {
const you_must_go_back_to_login = <Route
{...rest}
render={props =>
(<Redirect to={{
pathname: '/user/login',
state: { from: props.location }
}}
/>)
}
/>
const continue_journey = <Route
{...rest}
render={props =>
(<Component {...props} />)
}
/>
const [dest, setDest] = useState(you_must_go_back_to_login)
const [checkThat, setCheckThat] = useState(false)
useEffect(() => {
client.mutate({
mutation: VERIFY_TOKEN_MUTATION,
variables: { token }
}).then(result => {
// setDest(continue_journey)
setCheckThat(true)
})
return () => {
console.log()
};
}, [])
// if(authUser) {
if (checkThat) {
return continue_journey
} else {
return you_must_go_back_to_login;
}
}
here is the steps I need them to be done:
run mutate
setDest to one of you_must_go_to_login or continue_journey
setCheckThat or something like that to true or false based on token verified or not
return dest as a result
now I've got this error :
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
UPDATE
I changed my code to this but I still get the same error
const AuthRoute = ({ component: Component, authUser, ...rest }) => {
const you_must_go_back_to_login = (<Route
{...rest}
render={props =>
(<Redirect to={{
pathname: '/user/login',
state: { from: props.location }
}}
/>)
}
/>)
const continue_journey = (<Route
{...rest}
render={props =>
(<Component {...props} />)
}
/>)
// const [dest, setDest] = useState(you_must_go_back_to_login)
const [checkThat, setCheckThat] = useState(false)
useEffect(() => {
let isSubscribed = true
if (isSubscribed) {
getToken();
}
return () => isSubscribed = false
}, []);
const getToken = async (sig) => {
const data = await mutate(VERIFY_TOKEN_MUTATION, { token })
console.log(data)
setCheckThat(true);
console.log(checkThat)
return;
};
return checkThat ? continue_journey : you_must_go_back_to_login;
}

Answer 1

Error is caused by rendering redirect earlier than getting data.
Normlly ... instead useEffect you can use simple useQuery and use condition loading or !data for rendering some <Loading/> befor decision to redirect or give access (rendering redirect or guarded content).
Mutation is generally used for changing remote data. By using query you can pass variable and return answer, too.
I'm using django graphql jwt and the problem is that verifytoken for that is a mutation
In general/usually token is passed by header for requests and API returns response or errors (for missing/expired token). Usually you have an option to query current user for being logged verification.
... in this case we want to use mutation
... instead client.mutate we can use hooks - useMutation or better API example ( apollo docs :] ) - to get access to loading state before making decision
const [verifyToken, { data, loading, error }] = useMutation( VERIFY_TOKEN_MUTATION, variables: { token } );
Problems?
- mutations are not called at start - loading won't be true on the beggining;
- returned data.
For firing mutation at start we can use useEffect, for returned data we can use onCompleted handler but we can simply use data - should be undefined/nulled at start, usable for conditions.
Something like this should work (we don't need await etc. - data, loading, error will be updated automatically):
useEffect(() => {
verifyToken(); // ariables passed earlier, can be passed here
}, []);
if( !data ) return <Loading />
return data.someSuccessVerifiedField ? continue_journey : you_must_go_back_to_login;

Answer 2

The warning is pretty self-explanatory -
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Specially this part -
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
You are using useEffect in a wrong way. You should not put your mutation inside useEffect. What you can do is - take the mutation outside of the useEffect.
const [dest, setDest] = useState(you_must_go_back_to_login)
const [checkThat, setCheckThat] = useState(false)
client.mutate({
mutation: VERIFY_TOKEN_MUTATION,
variables: { token }
}).then(result => {
// setDest(continue_journey)
setCheckThat(true)
})
return () => {
console.log()
};
useEffect(() => {
// if(authUser) {
if (checkThat) {
return <continue_journey/>
} else {
return <you_must_go_back_to_login/>;
}
}, [checkThat])
}
So now mutation will run, then set checkThat variable. And then useEffect will be triggered which will return based on the value of checkThat