Multiple queries call in getStaticProps

[jurajkrivda]

Hello. I'm looking for instructions on how to make a calltwo (or more) methods in getStaticProps() but I haven't found anything. This is my idea.

import React from 'react';
import { GetStaticProps } from 'next';

import Users from '~modules/Users';
import Brands from '~modules/Brands';
import { UsersDocument } from '~modules/Users/users.graphql';
import { BrandsDocument } from '~modules/Brands/brands.graphql';
import { initializeApollo } from '~lib/apollo';

function Home() {
  return (
    <div>
      <Users />
      <Brands />
    </div>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const client = initializeApollo();

  await Promise.all([
    client.query({
      query: UsersDocument,
    }),
    client.query({
      query: BrandsDocument,
    }),
  ]);

  return {
    props: {
      initialApolloState: client.cache.extract(),
    },
    revalidate: 2,
  };
};

export default Home;

then

import React from 'react';

import { useBrandsQuery } from './brands.graphql';

import { isUndefined } from '~utils/isNil';

function Brands() {
  const { loading, data } = useBrandsQuery();

  if (loading) return <div>Loading</div>;

  const brands = data?.brands;

  if (isUndefined(brands)) return null;

  return (
    <div>
      {brands.map(brand => (
        <div key={brand.id}>{brand.name}</div>
      ))}
    </div>
  );
}

export default Brands;

What do you think about it?