@pack/client

// Loader function for this specific route
import {json} from '@shopify/remix-oxygen';

export async function loader({ context, params }: LoaderFunctionArgs) {
  return json({
    token: context.env.PACK_SECRET_TOKEN,
  });
}

// In your route file, use the loader
import { useLoaderData } from '@remix-run/react';

export const SomeComponent = () => {
  const { token } = useLoaderData<{ token: string }>();

  // Initialize the client with the fetched token
  const packClient = new PackClient({
    apiUrl: 'https://app.packdigital.com/graphql', // defaults to our CDN API https://apicdn.packdigital.com/graphql
    token: token,
    contentEnvironment: 'content_environment_handle', // defaults to the primary content environment
  });

  // Make a query to fetch the site settings
  useEffect(() => {
    if (packClient) {
      const query = `
      query SiteSettings($version: Version) {
        siteSettings(version: $version) {
          id
          status
          settings
          seo {
            title
            description
            keywords
          }
          favicon
          publishedAt
          createdAt
          updatedAt
        }
      }
    `;
      const fetchData = async () => {
        const response = await packClient.fetch(query, {variables: { version: 'CURRENT' }});
        console.log(response.data.siteSettings);
      };
      fetchData();
    }
  }, []);

   return (
    <div>
      <h1>Site Settings</h1>
    </div>
  );
};

interface PackClientOptions {
  /** Pack API token */
  token: string
  /** The content environment handle */
  contentEnvironment?: string
  /** The URL of the Pack GraphQL API */
  apiUrl?: string
}