Server component API requests with session token

[johngully]

@ozzyonfire First of all, thanks for creating a template that we can all use to build on 👍

I created a new embedded app want to request data from a server component. In this case, it seems that the server component does not have the Shopify session and fails immediately. What do I need to do to ensure that the session token is present and valid when loading from a server component.

It seems like there needs to be a way to establish the session so that server components can load data and validate the session token. What am I missing here?

/test/page.tsx

interface Data {
  name: string;
  height: string;
}

// This is the same request made in `client.page.tsx`
const handleGetAPIRequest = async () => {
  try {
    const prefix = 'https://my-fullyqualified-url.trycloudflare.com'
    const response = await fetch(`${prefix}/api/hello`);
    const result = (await response.json()) as { data: Data };
    return result;
  } catch (err) {
    console.log(err);
  }
};

export default async function Test() {
  const result = await handleGetAPIRequest();
  return <div>Test {`Name: "${result?.data?.name}"`}</div>;
}

Loading this page immediately fails with: Error: No bearer or session token present