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 key to your `.env`, e.g:

For SLEDGE_API_KEY and SLEDGE_IS_KEY, you can get it from:

Your Shopify Panel > Apps > Sledge > API Key.
Or see the Using Backend - General - API Key for more information.

.env

...
SLEDGE_API_KEY=""
SLEDGE_IS_KEY=""
...

Save session

app/root.tsx

import {
    getSledgeSession,
    getSledgeSettings,
    getWishlistInfo,
} from '@sledge-app/api';
 
export async function loader({context}: LoaderArgs) {
    ...
    const headers = new Headers();
    const lastSession = context.session.get('sledgeSession');
    const sledgeSession = await getSledgeSession({
        lastSession,
        apiKey: "Fill with Sledge API key",
        instantSearchApiKey: "Fill with Sledge Instant Search API key",
        userId: parseGid(customer?.id).id,
        userEmail: "Fill with customer email",
        userFullname: "Fill with customer full name",
    });
    const sledgeSettings = await getSledgeSettings({ sledgeSession });
 
    context.session.set('sledgeSession', sledgeSession);
 
    if (!lastSession) return redirect('/', {
        headers: {
            'Set-Cookie': await context.session.commit(),
        },
    });
 
    if (lastSession?.token !== sledgeSession?.token) headers.append('Set-Cookie', await context.session.commit());
 
    return defer(
        {
            ...
            sledgeSession,
            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={{
            apiKey: "Fill with Sledge API key",
            instantSearchApiKey: "Fill with Sledge Instant Search API key",
            userId: parseGid(customer?.id).id,
            userEmail: "Fill with customer email",
            userFullname: "Fill with customer full name",
            locale: "Fill with your locale language",
            sledgeSession: data.sledgeSession,
            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 Fetching Wishlist