使用 Axios 在 Next.js 应用程序中调用外部 API

Question

I want to fetch data from API and present it in the page. I have an API routes in my app.

Inside of api/apps/get-apps.js I have:

import { APPS_PATH, BASE_URL } from '../constants/api.constants';
import axios from 'axios';

export default async function handler(request, response) {
  const requestUrl = encodeURI(BASE_URL + APPS_PATH);    
  try {
    const axiosResponse = await axios.get(requestUrl);
    return response.status(200).send(axiosResponse.data);
  } catch (error) {
    return response.status(404).send('error');
  }
}

Inside pages/apps/index.js:

async function fetchAllReviews(id, callback) {
  try {
    const response = await axios.get('/api/reviews/get-apps');
    if (response.status === 200) {
      callback(true, response.data);
    }
  } catch (error) {
    callback(false, error);
  }

I want to add a query to the request with the id of the app, for instance:

api/reviews/get-apps?id=248294829

And use it inside the handler for call to the outer API.

---

I tried to add: params: { id } object to the request, but inside get-apps.js , I don't get the params inside of the response.

Answer 1

// pages/apps/index.js

async function fetchAllReviews(id, callback) {
  const id = 'some-id';

  try {
    const response = await axios.get(`/api/reviews/get-apps?id=${id}`);
    if (response.status === 200) {
      callback(true, response.data);
    }
  } catch (error) {
    callback(false, error);
  }
}

You can access the id in the API handler as follows:

// api/apps/get-apps.js 

export default async function handler(request, response) {
  const { id } = request.query;
}