As mentioned, we will use one request to get the user's name, the boards, and the teams that the user has access to. There are several benefits to combining the requests:
- Most importantly, it reduces the numbers of the requests required to get all of the data for initializing the home page.
- Second, it saves the effort to combine the results of two different responses. Otherwise, you will need to use a mechanism such as Bluebird's Promise.all to wait for both requests to finish before rendering the page.
- As a result, it improves the user experience because, in our case, fewer requests mean faster page rendering.
The GET request will be sent to /api/me, and the response body will be as follows:
{
"user": {
"name": "Sunny Hu"
},
"boards": [{
"id": 1,
"name": "vuejs.spring-boot.mysql",
"description": "An implementation of TaskAgile application with
Vue.js, Spring Boot, and MySQL",
"teamId": 0
},
...],
"teams": [{
"id": 1,
"name": "Sales & Marketing"
}]
}
As you can see, the data structure of the response is the same as the one we put into the Vuex store.