Server Side Fetching
Global

Global

If you prefer to fetch Sledge data on the server instead doing fetch on the client browser. You can use Sledge's API package called @sledge-app/api.

Basically the steps as simple as fetching data on server then pass that data to Sledge components, follow steps by steps below to see how to do the server side fetching.

Sledge Provider

Add fetching data

app/root.tsx
import { getSledgeSettings } from '@sledge-app/api';
 
export async function loader({context}: LoaderArgs) {
    ...
    const headers = new Headers();
    
    const sledgeSettings = await getSledgeSettings({
        userId: parseGid(customer?.id).id,
        userEmail: "Fill with customer email",
        userFullname: "Fill with customer full name",
        domain: "Fill with your shop's .myshopify.com domain name",
    });
 
    return defer(
        {
            ...
            sledgeSettings
        },
        {headers},
    );
    ...
}

Setup SledgeProvider

app/root.tsx
import sledgeStyle from '@sledge-app/core/style.css';
 
return [
    ...
    {rel: 'stylesheet', href: sledgeStyle},
    ...
]
 
export default function App() {
    const data = useLoaderData<typeof loader>();
    ...
    <SledgeProvider
        config={{
            userId: parseGid(customer?.id).id,
            userEmail: "Fill with customer email",
            userFullname: "Fill with customer full name",
            domain: "Fill with your shop's .myshopify.com domain name",
            sledgeSettings: data.sledgeSettings
        }}
    >
        <Layout {...data}>
            <Outlet />
        </Layout>
    </SledgeProvider>
    ...
}

Gid Parser (optional)

Parses Shopify Global ID (GID) (opens in a new tab) and returns the resource type and ID.

lib/shopify/parse-gid.ts
export default function parseGid(gid: string | undefined) {
  if (!gid?.includes("/")) return { id: gid || "", type: undefined };
 
  const arr = gid.split("/");
  const id = arr[arr.length - 1] || "";
  const type = arr[arr.length - 2];
 
  return { id, type };
}
Server Side FetchingWishlist