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

23 replies
Last updated: Jul 12, 2022
👋 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
Jul 11, 2022, 9:44 PM
Is your dataset private? If so, maybe once deployed to Netlify it doesn't have access to the correct token?
Jul 11, 2022, 9:46 PM
It is public
Jul 11, 2022, 9:47 PM
✔️ that shouldn't be the issue then! What does your client configuration look like?
Jul 11, 2022, 9:49 PM
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)

export default {
  apiVersion: 'v2022-05-01',
  dataset: 'production',
  projectId: 'abcd1234', //--- Your unique projectId goes here.
  useCdn: true,
};
Jul 11, 2022, 9:51 PM
It's pretty simple - I don't have a token though. I didn't think I needed one for a public dataset
Jul 11, 2022, 9:52 PM
Yes the project ID definitely matches - I just double checked
Jul 11, 2022, 9:52 PM
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.
Jul 11, 2022, 9:53 PM
hmm the docs don’t say you need one
Jul 11, 2022, 9:54 PM
I'll add one and let you know how I get on
Jul 11, 2022, 9:57 PM
I’m giving
npx @sanity/cli@shopify init --template shopify
a shot now to see if I can break it too!
Jul 11, 2022, 9:57 PM
Nice thanks!
Jul 11, 2022, 9:58 PM
My help may be limited. This is my first opportunity to touch hydrogen.
Jul 11, 2022, 9:59 PM
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
Jul 11, 2022, 9:59 PM
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.
Jul 11, 2022, 10:02 PM
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!
Jul 11, 2022, 10:05 PM
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/
Jul 11, 2022, 10:11 PM
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.
Jul 11, 2022, 10:12 PM
I’ve wanted to use this with a personal project too, and I will try to get a deploy started tomorrow and follow up.
Jul 11, 2022, 10:12 PM
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
🙂
Jul 11, 2022, 10:21 PM
Hey
user P
– 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.
Jul 11, 2022, 11:58 PM
(We’ll be updating that demo soon with support for basic account creation / management as well, if that’s of interest)
Jul 12, 2022, 12:00 AM
Oh thanks
user F
! That all makes total sense.Will switch
@sanity/client
over to
picosanity
👍
Jul 12, 2022, 12:04 AM
user F
user U
user M
Just wanted to confirm that switching to
picosanity
has worked 👍
Thanks for your help!
Jul 12, 2022, 4:07 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?