I'm having an issue I find difficult to resolve.
I'm creating a React Native app using React Navigation. My app has an authentication system. When my token expires, the server sends a 401 to my app. In turn, my app resets the state of React Navigation to a tree only containing the login screen.
During this reset, some queries fired by React Query are cancelled. I'm using Axios to actually compose these HTTP requests.
When my navigation state resets, I assume that forces the current screens to unmount. Thats makes that the fired Axios requests are cancelled. When inspecting the server, I see that the correct response is send. However, when console logging the response, it seems that the promise resolved with some kind of token:
1643978084913.zdcclzvj
My onSuccess crashes on it because it doesn't expect a string to be returned, but an AxiosResponse.
I verified that the backend is actually sending the correct object. I also verified that my device receives this object. I suspect that the promise is being resolved prematurely, due to the cancellation, with this string. However, I can't find the source of this string.
Does anybody know where this string comes from? Does anybody know how to prevent this promise to resolve with this - to me random - string?
To sketch my situation in code:
The useQuery:
useQuery<ResultItem[], string>( ["cacheKey"], async () => { const res = await getSomething(); console.log("res", res); // This logs this random string: 1643978084913.zdcclzvj return res.data.data.map(...); // Map to ResultItem. The app crashes here because it expects res to be an AxiosResponse, not a string } );The Axios request:
const api = axios.create({ baseURL: `${BASE_URL}/api`});export const getSomething = async () => api.get<SomethingResponse>(`/working/path/to/backend`);The response body from the server:
{error: { errorCode: "ERR_TOKEN_REVOKED" message: "Access is revoked" statusCode: 401} lokaliseId: "error__auth__sessionRevoked"}