How to make api calls for my dashboard to have data for all different component at once

user_15825108 0
Viewed 66

I am building a school management application with react as my front-end framework.

What do I want to achieve?

I will like to know the different approaches(OR the best practice) to making API calls to the dashboard when the user signs in to the application.

I have done some research but could not find any help.

Here are my thoughts

Please pardon my ignorance for I am new to making this kind of project.

  1. Make an API call for each piece of data that is coming from the backend and update the different components.
  2. Make one API call that will load all the user's data and store it in the redux store then from the redux store I can use the data and update the different components.

Thanks for your response.

reactjs dashboard api javascript
3 Answers

I do not think that there is "one right" answer, as this heavily depends on how frequently data will be updated, how much data there will be, how complex your component tree will be, etc...

A good practice is to fetch only the data that you currently need, to avoid unnecessary load and traffic on the server.

I assume that you have different pages, for example /login, /home and /class-rooms.

You can do:

  1. Upon successful login, fetch only the user data of the person that logs in (userId, email and unreadMessageCount for example). Then redirect him from /login to /home page
  2. On /home check if the required data for this page is already in the redux store and if not, fetch it.
  3. Same for the other routes, if the user changes the page to /class-rooms, check if the required data for this page is already in the redux store and if not, fetch it.

Also, depending on how often your data should be refreshed, you might want to read https://levelup.gitconnected.com/you-might-not-need-redux-883cd1fcbab0

user_25353150

If you're working with React, you've got multiple solutions, it depends a lot of what you need to do. On the project I'm currently working on, we got a LOT of data to show, compute and send to our users so we need to fetch when necessary.

  • Not a lot of data -> Single fetch which fetch everything necessary for your app
  • Lot of data -> Multiple fetches depending on the page / state you are

If you work with graphql, it's pretty easy to do multiple fetches as you can say in your query what you want to fetch

Once you've done a fetch, you just store it in a React Context or Redux as you prefer (I would suggest you to use contexts for performances but Redux isn't bad too)

user_197372070

THINGS TO DO

  1. Do make sure to use the JWT Token for authorization and other authentication activities.

  2. So Let's suppose you're signing in from your front-end so the best practice you could follow is : In Redux when you do API calls: Make the action type, Login reducer and For Async Request(API Calls) use Redux-Thunk.

  3. In your Login API return this sort of response :

      {
  "access_token": "XXXXXXXX",
 "token_type": "bearer",
 "expires_in": 1000000,
  "userid": 2,
  "name": "XYZ",
 "email": "email@gmail.com"
  }

  4. Save this token in your redux store or in your local Storage and then use it on every API call once a user logged In For e.g: (In GetUserInfo, UpdateInfo Anything inside your dashboard etc).

user_119860700
Related