Skip to main content

GIP (Get Initial Props) - Deprecated (Please use other data fetching methods)

When we start doing the TVLK5 project, this was the only data-fetching function there is, so you might encounter some of our older pages still using getInitialProps

For new pages, we recommend you using the other data-fetching functions: getServerSideProps or getStaticProps.

Customized getInitialProps function​

Since you would normally wrap your getInitialProps pages with withTraveloakPage, we can configure the second argument given to the page's getInitialProps handler.

In particular, we pass appContext (rawAppContext plus some other data) as the second argument to the page's getInitialProps.

import { TravelokaPageComponent } from '@traveloka/core';

const Page: TravelokaPageComponent = () => <div />;

Page.getInitialProps = (ctx, appContext) => {
  const {
    clientInterface,
    currentRoute,
    featureControl,
    locale,
    locales,
    currency,
    currencies,
  } = appContext;

  return {};
};

Page properties​

Beside hooks and helper functions, we also provide APIs accessible by adding certain properties to your page component:

Annotating type​

Basic configuration​

To help with autocomplete and typecheck, it's recommended to import TravelokaPageComponent to annotate your page component's type.

import { TravelokaPageComponent } from '@traveloka/core';

const Page: TravelokaPageComponent = () => <div />;

Setting props type​

You can also type the props type by passing it to TravelokaPageComponent<...>. This is useful to make sure that if you add getInitialProps, the return value of that function is correct.

import { TravelokaPageComponent } from '@traveloka/core';

type Props = {
  world: string,
};

const Page: TravelokaPageComponent<Props> = props => {
  return <div>{'Hello, ' + props.world}</div>;
};

Page.getInitialProps = async ctx => {
  // type error
  return null;
};