// app/root.jsx

import { getRootLoaderKeys, PreviewProvider } from 'sanity-oxygen-utils';

...

export function loader({ context }) {
  ...

  return {
    myData,
    ...(await getRootLoaderKeys(context)),
  }
}

export function Root({ app }) {
  ...
  const children = (
    ...other providers
    <Outlet />
  )

  return (
    <PreviewProvider
      datasets={[
        {
          label: 'development',
          value: 'development',
        },
        {
          label: 'production',
          value: 'production',
        },
      ]}
    >
      <Outlet />
      ...other
    </PreviewProvider>
  )
}

// app/routes/*/api.sanity-oxygen-utils.js
import { createApiRoute } from "../../src";

export function action({ request, context }) {
  return createApiRoute({ request, context });
}

import { sanityClient } from 'sanity-oxygen-utils';
import { useLoaderData } from '@remix-run/react';

const SANITY_QUERY = `*[id]`;

export function loader({ context }) {
  ...
  const sanityData = await sanityClient(context).fetch(SANITY_QUERY);

  return {
    sanityData,
  }
}

export function myComponent() {
  const { sanityData: _sanityData } = useLoaderData();

  const [sanityData] = useLiveQuery(_sanityData, SANITY_QUERY);

  console.log(sanityData); // done!
}