How can one retrieve data from two distinct API routes within a Next.js application?

Question

How can one retrieve data from two distinct API routes within a Next.js application?

Currently, I am working with Next.js and facing a challenge in fetching data from two different API routes simultaneously. My intention is to retrieve this data within the getServerSideProps function.

The first dataset that I require can be found at the endpoint

http://localhost:3000/api/admin/classes/${className}

.

Similarly, the second set of data is located at

http://localhost:3000/api/admin/classes/${className}/subjects

.

Although fetching data from a single API works seamlessly, I encountered difficulties when attempting to access both APIs using the code inside getServerSideProps.

I envision structuring the retrieved data as follows:

export default function classPage({ subjects, classDetail }) {}

. Therefore, ideal return props from getServerSideProps would resemble:

return { props: {classDetail: data, subjects: data2} }

, should it prove feasible.

export async function getServerSideProps({ query: { className } }) {
  const res = await fetch(
    `http://localhost:3000/api/admin/classes/${className}`
  );
  const res2 = await fetch(`http://localhost:3000/api/classes/${className}/subjects`);
  const { data } = await res.json();
  const {data2} = await res2.json();

  return { props: { classDetail: data, subjects: data2 } };
}

Here is an excerpt of the api GET request code:

      try {
        const subjectDetail = await Subject.find({}).populate('classDetail');
        res.status(200).json({success: true, data: subjectDetail});
      } catch (error) {
        res.status(400).json({success: false});
        console.log(error);
      }

javascript next.js

Answer 1

Answer №1

If you want a simpler solution, you don't have to wait for the first request to finish before starting the second one. You can use Promise.all to simultaneously fetch data from both endpoints.

export async function getServerSideProps({ query: { className } }) {
  // Set up promises for fetching required data
  const promises = [
    fetch(`http://localhost:3000/api/admin/classes/${className}`).then(res => res.json()),
    fetch(`http://localhost:3000/api/classes/${className}/subjects`).then(res => res.json()),
  ];

  // Use Promise.all to wait for all promises to resolve
  const [classDetail, subjects] = (await Promise.all(promises)).map(p => p.data);

  return { props: { classDetail, subjects } };
}

It seems like your issue with the second request lies in trying to destructure the data2 attribute using

const {data2} = await res2.json()

. Instead, focus on retrieving the data attribute from both responses, as shown in my example.

Answer 2

If you want a simpler solution, you don't have to wait for the first request to finish before starting the second one. You can use Promise.all to simultaneously fetch data from both endpoints.

export async function getServerSideProps({ query: { className } }) {
  // Set up promises for fetching required data
  const promises = [
    fetch(`http://localhost:3000/api/admin/classes/${className}`).then(res => res.json()),
    fetch(`http://localhost:3000/api/classes/${className}/subjects`).then(res => res.json()),
  ];

  // Use Promise.all to wait for all promises to resolve
  const [classDetail, subjects] = (await Promise.all(promises)).map(p => p.data);

  return { props: { classDetail, subjects } };
}

It seems like your issue with the second request lies in trying to destructure the data2 attribute using

const {data2} = await res2.json()

. Instead, focus on retrieving the data attribute from both responses, as shown in my example.

How can one retrieve data from two distinct API routes within a Next.js application?

Answer №1

Similar questions

Trigger an event upon completion of a write operation in AngularJS

What is the best way to simulate global variables that are declared in a separate file?

Discovering a way to capture the space bar event in a number input field with JavaScript

Utilizing Jquery to enhance table filtering functionality

Limiting page entry with passport.js and express middleware

Deactivate the Submit button when the database field has been populated

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Encountering the error message "OAUTH_CALLBACK_ERROR invalid_client" while trying to authenticate with a custom provider through Next

Callback function triggered upon the creation of a DOM node

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

I am finding my program to be lacking efficiency. Is there a more concise method for solving this issue?

Type of Multiple TypeScript Variables

Node.js: Capturing requests and responses for console logging

One issue with AngularJs is that it does not accurately display data that has been modified within

Issue with interaction between jQuery AJAX and PHP login functionality

The validation of form.$invalid appears to be malfunctioning when using the Angular UI date picker

Navigating through Next.js for slug URLs such as site.com/username

Creating a React website and running it locally on VSCode

converting a JSON object into an array

Trouble arises when attempting to parse multiple objects from a JSON file using JavaScript