home

Use home to learn which sections the merchant placed on the home page, and in what order. Your theme then renders each entry (see Add a home block).

import { useQuery } from '@tanstack/react-query';
import { home } from '@salla.sa/twilight-theme-engine/api/home';

export function HomeSections() {
  const { data: components = [] } = useQuery(home.queries.components());

  return <p>{components.length} sections</p>;
}

import { home } from '@salla.sa/twilight-theme-engine/api/home';
import { getTwilightContext } from '@salla.sa/twilight-theme-engine/tanstack';

loader: async () => {
  const { queryClient } = getTwilightContext();
  return queryClient.ensureQueryData(home.queries.components());
},

MethodsCopy Anchor Link

QueriesCopy Anchor Link

The key includes the active scope, because each market has its own home page. It does not include the locale, so add it to your own key if your home page changes language without a reload.

GotchasCopy Anchor Link

• Returns [] when the response has no data.
• A failed request throws HTTPError or TimeoutError.
• ensureQueryData returns cached data without refetching, so a loader does not hit the network again until the data is stale or invalidated.

See alsoCopy Anchor Link

• Home route
• Loading data