multiple axios request in a react-native app: best practices - react-native

Question

I have a question concerning a react native app and doing network requests.
I'm creating a react native app and as a backend I'm using NodeJS.
Users can sign up/sign in, and the refresh token is stored. Everytime the app opens, a new refresh token is fetched (if the user is signed in). This is an example of a network request that happens every time the app opens.
When the app opens and the user is signed in, I do a second network request (after the first network request for the access token was successful), to check if the data in redux has to be synchronized with the data in the database. I store some general information like the username locally + in the database. If - for any reason - I have to change the username in the database, I set the field "shouldSync" to true. The app sends a request to /api/sync, the controller sees that shouldSync = true and sends back all the data from the database to the user.
I also have a third network request that runs every time the app opens up: to check if there is a new version. I do a request to /api/version, with a response like "1.0.0". If the local version differs from the version in the response, I show an alert (only one time) saying there is a new version in the app store/play store.
When the app closes/goes in background mode, I also do a network request to the server to store the last active timestamp.
All these requests work, and I don't see any bottlenecks yet, but I have never built a production-graded app, so I have a few question concerning these network requests. I hope somebody can answer them.
Is it ok to do 3 separate network requests, or should I try to combine the three requests into one? I could combine the access token request + sync request (because these run when the user is signed in), but NOT the version request (because this request always has to run).
On some screens, I need dynamic data from the database/server. Sometimes I have 3-5 separate requests running at the same time. I'm using axios and I've made my code like this:
// first request
const requestOne = () => {
return axios({ ... });
};
// second request
const requestTwo = () => {
return axios({ ... });
};
// run these requests when the screen mounts
useEffect(() => {
axios.all([requestOne(), requestTwo()])
.then(axios.spread((requestOneRes, requestTwoRes) => {
// response from request one
console.log(requestOneRes.data);
// response from request two
console.log(requestTwoRes.data);
}));
}, []);
Is this a good example of combining multiple requests?
The most requests don't have a lot of response data. I have tested some requests in Postman and I've checked the response sizes of some requests, I've listed them here:
Everytime the app opens up:
/api/version: 463B request size / 231B response size
When the user signs in or signs up:
/sign-in: 476B request size / 1.16kB response size
/sign-up: 472B request size / 408B response size
When the app opens up + when the user is signed in:
/api/version: 463B request size / 231B response size
/refresh-access-token: 649B request size / 521B response size
/api/sync: 633B request size / 244B response size (NOT SYNCING) or 592B response size (SYNCING)
Total: +/- 1.6kB request size / +/- 1.25kB response size
I'm using express and BodyParser and I've set the limit to 2MB (2,000,000B).
app.use(bodyParser.json({ limit: 2000000 }));
I have installed request-stats in my NodeJS-backend to log all incoming requests. I'll all parts of my app separately and log all (big) requests, but for now I don't see any requests > 10kB, and even these are very rare.
Sorry for the long text. I want to be as clear as possible.

Answer 1

One recommendation, depending on the nature of your auth, is to remove the refreshToken expiry. Technically, the refresh token should be the retainer for the generation of new accessTokens (of which have an expiry). Refresh tokens themselves should not be regenerating without a relog by the end user. So instead of the user getting a new auth token, my way of assessing requests is 1. attempt the desired request, upon a 400 error, assess the response in axios for handling. If it is the result of an invalid/expired access token, request for a refresh with the stored refresh token. 2. Resend the prior request. This system removes the need for unnecessary request handling upon app start. Good luck!