Discussion about deploying Sanity Hydrogen demo to Netlify and resolving issues with `@sanity/client`

👋 Hello, team!
I've been playing around with the sanity-hydrogen-demo.
It works perfectly locally but when I deploy it to Netlify, the sanity client fetch returns

undefined

.
Is there some config I am missing to allow Netlify Edge functions to query Sanity?
It
feels like a CORS problem but I have added the Netlify domain to the Sanity CORS origins for the project.

https://sanity-io-land.slack.com/archives/C9Y51FDGA/p1655916116157169

Is your dataset private? If so, maybe once deployed to Netlify it doesn't have access to the correct token?

It is public ✅

✔️ that shouldn't be the issue then! What does your client configuration look like?

Do you have your projectId defined in

./sanity.config.ts

?This should match the projectId defined in the matching
studio config

sanity.json

(production is the typical dataset name, but this can be changed)

It's pretty simple - I don't have a token though. I didn't think I needed one for a public dataset

Yes the project ID definitely matches - I just double checked

I haven’t used this demo config yet and just glazed over the readme. I believe you will need a token for shopify to update documents.

hmm the docs don’t say you need one

I'll add one and let you know how I get on

I’m giving a shot now to see if I can break it too!

Nice thanks!

My help may be limited. This is my first opportunity to touch hydrogen.

To deploy to Netlify, I added this module to vite config btw. Maps hydrogen output to Netlify edge functions

https://github.com/netlify/hydrogen-platform

I’m getting some bugginess with vision and some plugins with my recent v3 beta tinkering and this. I don’t think I’ll be able to have a good response for you today, but I’ll keep tinkering with it.

Unfortunately the token hasn't helped 😞
Thanks for your help! I'm in no rush
🙂 I just found it a little strange because I figured Netlify would be supported which makes me think it's a "me" problem 😁I've also reached out to Netlify to see if they can help .I will keep you updated!

I was hoping on first reply that it might be some low hanging fruit lol.
Here are the netlify integration notes from
hydrogen’s docs : https://docs.netlify.com/integrations/frameworks/hydrogen/

I wouldn’t normally toss a big page of docs at someone unless like in this case, I haven’t had a chance to deploy this myself just yet.

I’ve wanted to use this with a personal project too, and I will try to get a deploy started tomorrow and follow up.

Thanks yea those are the docs I followed 👍

Here's my repo which I took from Sanity's demo and added the Netlify config if you're interested. I also added some i18n functionality.
Side note - the project is awesome, great resource thanks guys
🙂

Hey – it’s definitely not a “you” problem!

useSanityQuery

is a wrapper for Hydrogen’s

useQuery

function. Whilst not yet documented on their site,

useQuery

also returns

error

in its response, and tracing this reveals the issue to lie within

@sanity/client

.
I haven’t really delved into this (nor have used Netlify edge functions), but a workaround that works
right now is replacing all instances of

@sanity/client

with

picosanity

(https://github.com/rexxars/picosanity ) which should work just fine, since

useSanityQuery

is only doing basic fetching anyway.
You’ll need to make sure to replace usage in

sitemap.xml.server.ts

too, since that is also fetching your Sanity dataset to generate a sitemap at runtime.

(We’ll be updating that demo soon with support for basic account creation / management as well, if that’s of interest)

Oh thanks ! That all makes total sense.Will switch

@sanity/client

over to

picosanity

👍

Just wanted to confirm that switching to

picosanity

has worked 👍
Thanks for your help!