next#GetStaticPathsContext TypeScript Examples

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const { pages } = await getAllPages()
  const [invalidPaths, log] = missingLocaleInPages()
  const paths = pages
    .map((page) => page.url)
    .filter((url) => {
      if (!url || !locales) return url
      // If there are locales, only include the pages that include one of the available locales
      if (locales.includes(getSlug(url).split('/')[0])) return url

      invalidPaths.push(url)
    })
  log()

  return {
    paths,
    // Fallback shouldn't be enabled here or otherwise this route
    // will catch every page, even 404s, and we don't want that
    fallback: false,
  }
}

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const { products } = await getAllProductPaths()

  return {
    paths: locales
      ? locales.reduce<string[]>((arr, locale) => {
          // Add a product path for every locale
          products.forEach((product) => {
            arr.push(`/${locale}/product${product.node.path}`)
          })
          return arr
        }, [])
      : products.map((product) => `/product${product.node.path}`),
    fallback: 'blocking',
  }
}

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  return {
    paths: [],
    fallback: true,
  }
}

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const paths = await getAllCollectionPaths(shopifyConfig)
  return {
    paths: paths.map((path) => `/collection/${path}`),
    fallback: 'blocking',
  }
}

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const paths = await getAllProductPaths(shopifyConfig)
  return {
    paths: paths.map((path) => `/product/${path}`),
    fallback: 'blocking',
  }
}

getStaticProps = async (context: GetStaticPathsContext) => {
  const posts = await getAllMdxNodes("doc");

  const cleanedDocsPositions = docsPositions.map((a) =>
    a.replace("/index.mdx", "").replace(".mdx", "")
  );

  const allSlugs = posts.map((each) => {
    return {
      slug: `docs${each.slug !== "" ? `/${each.slug}` : ""}`,
      title: each.frontMatter.title,
      description: each.frontMatter.description,
      hide: each.frontMatter?.hide ? true : false,
    };
  });

  const sorted = allSlugs.sort((a, b) => {
    return (
      cleanedDocsPositions.indexOf(a.slug) -
      cleanedDocsPositions.indexOf(b.slug)
    );
  });

  const routePaths = sorted.filter((each) => each.slug.split("/").length <= 2);

  const menu = routePaths.map((each) => {
    return {
      slug: each.slug,
      title: each.title,
      description: each.description,
      hide: each.hide,
      children: sorted
        .filter(
          (child) =>
            (child.slug.split("/")[1] === each.slug.split("/")[1] &&
              child.slug.split("/").length == 3) ||
            (child.slug.split("/")[1] === each.slug.split("/")[1] &&
              child.slug.split("/").length === 2)
        )
        .map((eachChild) => {
          return {
            slug: eachChild.slug,
            title: eachChild.title,
            description: eachChild.description,
            hide: eachChild.hide,
            children: sorted.filter(
              (secondChild) =>
                secondChild.slug.split("/")[2] ===
                  eachChild.slug.split("/")[2] &&
                secondChild.slug.split("/").length == 4
            ),
          };
        }),
    };
  });

  const doc = await getMdxNode("doc", context, {
    components,
    mdxOptions: {
      remarkPlugins: [require("remark-slug")],
    },
  });

  if (!doc) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      doc,
      menu,
    },
  };
}

describe('Post', () => {
  beforeAll(() => {
    mockedUseRouter.mockReturnValue({
      isFallback: false,
    });

    mockedPrismic.mockReturnValue({
      getByUID: () => {
        return Promise.resolve(mockedGetByUIDReturn);
      },
      query: () => {
        return Promise.resolve(mockedQueryReturn);
      },
    });
  });

  it('should be able to return prismic posts documents paths using getStaticPaths', async () => {
    const getStaticPathsReturn = [
      {
        params: {
          slug: 'como-utilizar-hooks',
        },
      },
      {
        params: {
          slug: 'criando-um-app-cra-do-zero',
        },
      },
    ];

    const getStaticPathsContext: GetStaticPathsContext = {};

    const response = (await getStaticPaths(
      getStaticPathsContext
    )) as GetStaticPathsResult;

    expect(response.paths).toEqual(getStaticPathsReturn);
  });

  it('should be able to return prismic post document using getStaticProps', async () => {
    const routeParam = parse('como-utilizar-hooks');

    const postReturn = mockedGetByUIDReturn;
    const getStaticPropsContext: GetStaticPropsContext<ParsedUrlQuery> = {
      params: routeParam,
    };

    const response = (await getStaticProps(
      getStaticPropsContext
    )) as GetStaticPropsResult;

    expect(response.props.post).toEqual(postReturn);
  });

  it('should be able to render post document info', () => {
    const postProps = mockedGetByUIDReturn;

    render(<Post post={postProps} />);

    screen.getByText('Como utilizar Hooks');
    screen.getByText('25 mar 2021');
    screen.getByText('Joseph Oliveira');
    screen.getByText('4 min');

    screen.getByText('Proin et varius');
    screen.getByText(/Nullam dolor sapien/);
    screen.getByText('Cras laoreet mi');
    screen.getByText(/Ut varius quis velit sed cursus/);
  });

  it('should be able to render loading message if fallback', () => {
    mockedUseRouter.mockReturnValueOnce({
      isFallback: true,
    });

    const postProps = mockedGetByUIDReturn;

    render(<Post post={postProps} />);

    screen.getByText('Carregando...');
  });

  it('should be able to render Header component', () => {
    const postProps = mockedGetByUIDReturn;

    render(<Post post={postProps} />);

    screen.getByAltText('logo');
  });
});