Sanity and Hydrogen v2

[carstensbix]

Hi, before sanity integrated seamlessly with hydrogen v1, can somebody explain how you would do this now?

Before i had a custom hook for making sanity calls:

const client = sanityClient(sanityConfig);

export default function useSanityQuery<T>({
  hydrogenQueryOptions,
  query,
  params = {},
}: Props) {
  return useQuery<T>(
    [query, params],
    async () => await client.fetch(query, params),
    hydrogenQueryOptions,
  );
}

Then i could do this in my server components:

const {data: sanityHome} = useSanityQuery<SanityHomePage>({
    hydrogenQueryOptions: {preload: true},
    query: QUERY_SANITY,
});

[juanpprieto]

Hi @carstensbix thanks for stopping by.

While we release examples, I suggest you take a look at how we create and embed the storefront API client inside the remix context. Here's an approach you could pursue:

1. Creating the client instance
   

   hydrogen/templates/demo-store/server.ts

   Line 34 in d94488b

   const {storefront} = createStorefrontClient({

// server.ts
const sanityClient = sanityClient(sanityConfig);
async function sanity<T>(query, params = {}): <T> {
 return await client.fetch(query, params)
}

2. Expose the client to the context, so that it is available in all loaders and actions
   

   hydrogen/templates/demo-store/server.ts

   Line 54 in d94488b

   getLoadContext: () => ({cache, session, waitUntil, storefront, env}),

// server.ts
const handleRequest = createRequestHandler({
  build: remixBuild,
  mode: process.env.NODE_ENV
  getLoadContext: () => ({cache, session, waitUntil, storefront, env, sanity}),
});

3. Use it within any loader

// routes/index.tsx

export async function loader({params, context}: LoaderArgs) {
  const {data: sanityHome} = await context.sanity(QUERY_SANITY, {);
  return json({data})
  
  // or if you want to defer the query/loading
  const {data: sanityHome} = context.sanity(QUERY_SANITY, {);
  return defer({data})
}