I have been struggling with this for a while. I know how to use Nuxt asyncData to make one request and how to make multiple requests, but is it possible to make multiple requests with a conditional built in? e.g. sometimes it will make one request and sometimes two requests, based on a query param.
async asyncData({ $axios, route }) {
if (route.query.query) {
if (route.query.tab === 'companies') {
// API Call "Search companies"
return await $axios.$get(`/v1/search/companies/${route.query.query}`).then((res) => {
return {
tab: 'companies',
query: route.query.query,
companyResults: res.data.data,
}
})
} else {
let company = null
if (route.query.company) {
// API Call "Read a company"
await $axios.$get(`/v1/companies/${route.query.company}`).then((res) => {
company = res.data
})
}
// API Call "Search requests"
return await $axios.$get(`/v1/search/requests/${route.query.query}`).then((res) => {
return {
company,
tab: 'requests',
query: route.query.query,
requestResults: res.data.data,
}
})
}
}
}
The problem lives in the else statement. If the "company" query param is set I want it to make the "Read a company" and "Search requests" API calls. If the query param is not set, then it would only make the "Search requests" API call.
When I execute this, all the correct API calls are made, but the data is not returned correctly from asyncData.
I think the problem is that you are using a weird mix of async/await and promises. Try this:
async asyncData({ $axios, route }) {
if (route.query.query) {
if (route.query.tab === 'companies') {
// API Call "Search companies"
const response = await $axios.$get(`/v1/search/companies/${route.query.query}`)
return {
tab: 'companies',
query: route.query.query,
companyResults: response.data.data,
}
} else {
let company = null
if (route.query.company) {
// API Call "Read a company"
const response = await $axios.$get(`/v1/companies/${route.query.company}`)
company = response.data
}
// API Call "Search requests"
const reponse = await $axios.$get(`/v1/search/requests/${route.query.query}`)
return {
company,
tab: 'requests',
query: route.query.query,
requestResults: reponse.data.data,
}
}
}
}
So it turns out the issue was not with asyncData. When you use $get Nuxt Axios there is a shortcut built-in that automatically returns the data rather than an object with a data property.
This means I just needed to replace the ".data.data" with a single ".data".
async asyncData({ $axios, route }) {
if (route.query.query) {
if (route.query.tab === 'companies') {
// API Call "Search companies"
const response = await $axios.$get(`/v1/search/companies/${route.query.query}`)
return {
tab: 'companies',
query: route.query.query,
companyResults: response.data,
}
} else if (route.query.company) {
// API Call "Read a company" and "Search requests"
const [companyResponse, requestsResponse] = await Promise.all([$axios.$get(`/v1/companies/${route.query.company}`), $axios.$get(`/v1/search/requests/${route.query.query}`)])
return {
company: companyResponse,
tab: 'requests',
query: route.query.query,
requestResults: requestsResponse.data,
}
} else {
// API Call "Search requests"
const response = await $axios.$get(`/v1/search/requests/${route.query.query}`)
return {
tab: 'requests',
query: route.query.query,
requestResults: response.data,
}
}
}
},
A special thanks to Daniel Roe on the Nuxt Github Repo.