Fetching data from two different API calls on getInitialProps #13915

PiotrNap · 2020-06-08T20:36:44Z

PiotrNap
Jun 8, 2020

Hi, I'm relatively new to next.js and web development. I'm currently working on one of my app where I have an API call in _app.js for server side data fetching. I would also like to add an additional API call to fetch some data from another route ('/api/tickets').

I was trying to approach this solution #7193 ,but I cannot get it to working. My code from _app.js looks like this:

import Head from 'next/head';
import { Fragment } from 'react';
import favicon from '../public/favicon.png';
import Header from '../components/header/Header';
import Footer from '../components/footer/footer';
import GlobalStyle from '../components/styles/GlobalStyles';

const AppComponent = ({
  Component,
  pageProps,
  currentUser,
  title = 'Ticket Market | Buy Sell and Enjoy!',
}) => {
  return (
    <Fragment>
      <Head>
        <title>{title}</title>
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        <link rel='shortcut icon' href={favicon} />
        <link
          rel='stylesheet'
          href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'
        />
        <meta
          property='og:title'
          content='Ticket Market | Buy Sell and Enjoy!'
          key='title'
        />
      </Head>
      <GlobalStyle />
      <Header currentUser={currentUser} />
      <Component currentUser={currentUser} {...pageProps} />
      <Footer />
    </Fragment>
  );
};

AppComponent.getInitialProps = async (appContext) => {
  // console.log(appContext);
  const client = buildClient(appContext.ctx);

  const { data } = await client.get('/api/users/currentuser');

  let pageProps = {};
  if (appContext.Component.getInitialProps) {
    pageProps = await appContext.Component.getInitialProps(
      appContext.ctx,
      client,
      data.currentUser
    );
  }

  return {
    pageProps,
    ...data,
  };
};

export default AppComponent;

Where I'm fetching data from '/api/users/currentuser' . How could I add an another API call to run them both concurrently?

Answered by Vadorequest

Jun 8, 2020

#7193 (comment) is definitely the way to go for parallel promises.

Start smaller, don't run them in parallel, run them in serie like you'd normally do and once you get it working try it parallel, playing with parallel promises is a bit harder.

View full answer

Vadorequest · 2020-06-08T21:58:24Z

Vadorequest
Jun 8, 2020

#7193 (comment) is definitely the way to go for parallel promises.

Start smaller, don't run them in parallel, run them in serie like you'd normally do and once you get it working try it parallel, playing with parallel promises is a bit harder.

1 reply

PiotrNap Jun 9, 2020
Author

Thank you, I will try to do that. Otherwise I will find another workaround!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fetching data from two different API calls on getInitialProps #13915

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Fetching data from two different API calls on getInitialProps #13915

Uh oh!

Uh oh!

PiotrNap Jun 8, 2020

Replies: 1 comment · 1 reply

Uh oh!

Vadorequest Jun 8, 2020

Uh oh!

PiotrNap Jun 9, 2020 Author

PiotrNap
Jun 8, 2020

Replies: 1 comment 1 reply

Vadorequest
Jun 8, 2020

PiotrNap Jun 9, 2020
Author