Is it possible to make multiple requests in Nuxt asyncData with conditional statements?-CodePudding

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.

CodePudding user response：

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,
      }
    }
  }
}

CodePudding user response：

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.