GraphQL Example.ts

// @ts-nocheck

import directoriesData from '../data/directoriesData';
import providersData from '../data/providersData';

import { GetStaticPaths } from 'next'; // TypeScript type
import { GetStaticProps } from 'next'; // TypeScript type

import CardList from '../components/provider/CardList';
// import CardList from '../components/provider/CardList/index'

// Future GraphQL
// import { getDirectories, getProviders } from "../lib/getGraphqlData"

export const getStaticPaths = async () => {
  // let data = directoriesData[0].data.allProviderToDirectories.edges[0].node;
  let dataRaw = directoriesData.data;
  let data = [];

  for (const value of Object.values(dataRaw)) {
    let link = value.edges[0].node.directoryLink;
    link = link.replace('https://www.expertise.com/', '');
    let slugArr = link.split('/');
    data.push(slugArr);
  }

  let paths = data.map((slugArr) => ({
    params: { slug: slugArr },
  }));

  // paths = [
  //   {
  //     params: { slug: ['az', 'phoenix', 'car-accident-lawyers'] },
  //   },
  //   { params: { slug: ['az', 'phoenix', 'plumbing'] } },
  // ];

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context: any) => {
  // export const getStaticProps = () => {
  let id = context.params.slug.join('/');

  if (id === 'az/phoenix/car-accident-lawyers') {
    id = 'providers1';
  } else {
    id = 'providers2';
  }

  // let dataRaw = providersData.data;
  let dataRaw = providersData.data[id].edges;

  let data = [];
  for (const provider of dataRaw) {
    data.push(provider.node);
  }
  // for (const [key, value] of Object.entries(dataRaw)) {
  //   for (let provider of value.edges) {
  //     data.push(provider.node);
  //   }
  // }
  // let data = directoriesData[0].data.allProviderToDirectories.edges[0].node;

  // Future GraphQL
  // let slug = context.params.slug;
  // let data = await getProviders(slug);

  return {
    props: {
      providers: data,
    },
  };
};

const VerticalMetro = ({ providers }) => {
  console.log('slug component', providers);

  return (
    <>
      <CardList providers={providers} />
    </>
  );
};

export default VerticalMetro;

/*
NOTES

GETSTATICPROPS()
https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

DOCS
https://nextjs.org/docs/routing/dynamic-routes

--------------------------------------------------------------------------------
NESTED ROUTES

https://stackoverflow.com/questions/62203879/how-to-provide-an-array-in-getstaticpaths 

--------------------------------------------------------------------------------
CATCH ALL ROUTES

https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

https://stackoverflow.com/questions/68147655/next-js-catch-all-as-routing

MANUALLY CREATE FOLDERS 

https://stackoverflow.com/questions/65988686/nextjs-nested-dynamic-folder-routing
https://stackoverflow.com/questions/58075798/
dynamic-routing-with-multiple-parameters-in-next-js

DYNAMICALLY CREATE FOLDERS

https://stackoverflow.com/questions/52105699/nested-routes-in-next-js

https://stackoverflow.com/questions/57648690/2-levels-nested-routing-in-nextjs

--------------------------------------------------------------------------------
ROUTING 

query object? 

https://nextjs.org/docs/routing/introduction

use a URL object in href where:
pathname is the name of the page in the pages directory. /blog/[slug] in this case.
query is an object with the dynamic segment. slug in this case.

https://nextjs.org/docs/routing/dynamic-routes

Any route like /post/1, /post/abc, etc. will be matched by pages/post/[pid].js. The matched path parameter will be sent as a query parameter to the page, and it will be merged with the other query parameters.

For example, the route /post/abc will have the following query object:
{ "pid": "abc" }

Catch all routes

Matched parameters will be sent as a query parameter (slug in the example) to the page, and it will always be an array, so, the path /post/a will have the following query object:
{ "slug": ["a"] }

And in the case of /post/a/b, and any other matching path, new parameters will be added to the array, like so:
{ "slug": ["a", "b"] }

--------------------------------------------------------------------------------
getStaticPaths(), getStaticProps() can be async

HOW DO PROPS IN GETSTATICPROPS() GET PASSED TO THE COMPONENT?
*/