Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Issue with loading documents in local Sanity Studio due to incorrect image field setup

10 replies
Last updated: Jan 11, 2022
Hi! In my Sanity Studio (local, not deployed) my documents won’t load. I am using React on the frontend to dynamically create a new User and Pins etc but it’s just stuck on “Loading documents…” for a long time. What can be the issue?
Jan 6, 2022, 2:36 PM
Are you performing any fetches or calls to external API's that may not be resolving in these documents?
Jan 6, 2022, 6:16 PM
Np. I don’t think so that there is any other third-party API call. I am just connecting Sanity to React with a client file:

export const client = sanityClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2021-11-16',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});
And then using it to save a new user via Google login:


const responseGoogle = (response) => {
    localStorage.setItem('user', JSON.stringify(response.profileObj));
    const { name, googleId, imageUrl } = response.profileObj;

  
    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    };

   
    client.createIfNotExists(doc).then(() => {
     // Navigate to homepage
    });
  };
I am able to login but that user is not showing in Sanity Studio it’s stuck in login and here’s what it says on Network tab:
Jan 7, 2022, 2:12 PM
Np. I don’t think so that there is any other third-party API call. I am just connecting Sanity to React with a client file:

export const client = sanityClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2021-11-16',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});
And then using it to save a new user via Google login:


const responseGoogle = (response) => {
    localStorage.setItem('user', JSON.stringify(response.profileObj));
    const { name, googleId, imageUrl } = response.profileObj;

  
    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    };

   
    client.createIfNotExists(doc).then(() => {
     // Navigate to homepage
    });
  };
Jan 7, 2022, 2:12 PM
After some minutes I get this and then when I click clicking “Retry” it does the same thing. You can also see there’s an error on console:
Jan 7, 2022, 2:26 PM
After some minutes I get this and then when I click clicking “Retry” it does the same thing. You can also see there’s an error on console:
Jan 7, 2022, 2:26 PM
I think the issue is that your
image
property is not shaped correctly. You need to first upload the asset to Sanity, then use an object like this to work in the schema:
image: {
  _type: 'image',
  asset: {
    _type: 'reference',
    _ref: '<id-of-the-uploaded-asset>'
  }
}
Jan 7, 2022, 6:37 PM
It’s strange because when I deploy Sanity Studio and open it on my phone it does display the content.
Also, when I fetch the data using the query under the Vision tab it does show!
Jan 10, 2022, 2:46 PM
It’s strange because when I deploy Sanity Studio and open it on my phone it does display the content.
Also, when I fetch the data using the query under the Vision tab it does show!
Jan 10, 2022, 2:46 PM
Yes, but it's not set up correctly to work with an image schema in a document. You've set a field called
image
to a url, but your Studio won't be able to work with that.
Jan 10, 2022, 5:15 PM
Hey thanks! I just rewrote the image field in my Sanity backend code and now it shows the data. You can mark it solved. 😊
Jan 11, 2022, 2:25 PM

Sanity– build remarkable experiences at scale

Sanity is a modern 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?