Theme Pages

Theme Pages are React components which are mounted at route level by the Theme rendering engine. These components support adding static methods like serverFetch for resolving server side data, it also supports adding static methods like serverFetch and AuthGuard. All Theme pages must be returned from the bootstrapping function in index.jsx file.
The primary types of theme pages are: System Pages, Custom Pages, Section Pages and Marketing Pages.

serverFetch

The serverFetch is an async function which is called during server side rendering, developers can add any async data resolvers that must be resolved on the server before rendering the current page.
The syntax for serverFetch function:

function serverFetch({ fpi, router }) : Promise<any>

Theme pages must be exported as default components from the pages directory. In the ~/theme/index.jsx file, the page should be returned from within the default exported bootstrap function. To create a separate chunk for the page, developers can use Webpack’s dynamic import() syntax to load the component asynchronously.

note

Make sure the webpack's ChunkName matches the key for the component in the returned object.

Example for Product listing page

import React from 'react';
import { useGlobalStore } from 'fdk-core/utils';

const ProductListing = ({ fpi }) => {

  // Store Data is available using useGlobalStore
  const productLists = useGlobalStore(fpi.getters.PRODUCTS) || {};
  // Use `fpi` to fetch data from SDK and update store

  // This is an example implementation
  useEffect(() => {
    if (!productLists) {
      fpi.products.fetchProducts({});
    }
  }, [productLists])

  return (
    <>
      {
        // Return UI based on store data
      }
    </>
  );
};

ProductListing.serverFetch = async ({ fpi, router }) => {
  const queries = router.filterQuery;
  let defaultQuery = {
    pageNo: 1,
    pageSize: 12,
  };
  defaultQuery = { ...defaultQuery, ...queries };
  return fpi.products.fetchProductListing(defaultQuery);

};

export default ProductListing;

And in index.jsx file,

import FPIClient from "fdk-store";
import customTemplates from "./custom-templates";
import "./styles/base.less";
import sections from "./sections";
import Header from "./components/header/header";
import Footer from "./components/footer/footer";
import { globalDataResolver, pageDataResolver } from "./lib"

export default async ({
  applicationID,
  applicationToken,
  domain,
  storeInitialData,
}) => {
  const fpiOptions = {
    applicationID,
    applicationToken,
    domain,
    storeInitialData,
  };

  const { client: fpi } = new FPIClient(fpiOptions);

  return {
    fpi,
    sections,
    customTemplates,
    globalDataResolver,
    pageDataResolver,
    getHeader: () => Header,
    getFooter: () => Footer,
    getProductListing: () => 
    import(/* webpackChunkName:"getProductListing" */ "./pages/product-listing"),
    // ... other pages
  };
};