Sanity Studio stuck on "Loading documents..." indefinitely

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?

AI Update

When Sanity Studio gets stuck on "Loading documents…" for a long time locally, this is usually a configuration issue. Here are the most common causes and solutions:

Check Your Configuration File

First, make sure your sanity.config.js (or sanity.config.ts) has the correct projectId and dataset configured. Using defineConfig, your config should look something like this:

import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'

export default defineConfig({
  name: 'default',
  title: 'My Studio',
  projectId: 'your-project-id', // Make sure this is correct
  dataset: 'production',         // Make sure this matches your dataset
  plugins: [
    structureTool()
  ],
  schema: {
    types: [/* your schema types */]
  }
})

Environment Variables in Studio v3+

If you're using environment variables, note that Sanity Studio v3+ requires the SANITY_STUDIO_ prefix for environment variables to be accessible in the browser. Your .env file should look like:

SANITY_STUDIO_PROJECT_ID=your-project-id
SANITY_STUDIO_DATASET=production

Then reference them in your config:

export default defineConfig({
  projectId: process.env.SANITY_STUDIO_PROJECT_ID,
  dataset: process.env.SANITY_STUDIO_DATASET,
  // ... rest of config
})

Common Issues & Solutions

Missing or incorrect projectId/dataset: Double-check these values match your actual Sanity project
Authentication issues: Run sanity login in your terminal to ensure you're authenticated
Corrupted node_modules or lock files: As mentioned in this community thread, sometimes re-cloning the project or running npm install (or yarn install) fresh can resolve dependency sync issues
Schema errors: Check your browser console for any schema validation errors that might be preventing documents from loading
CORS issues: If you're running Studio embedded in another app, ensure your project's CORS origins are configured correctly in your Sanity project settings

Quick Debugging Steps

Check the browser console for specific error messages
Verify your projectId and dataset are correct in your config
Try running sanity login to refresh authentication
Clear your browser cache or try in an incognito window
If using a starter template, try npm install or yarn install to ensure dependencies are in sync

If you're still stuck after trying these solutions, check the browser console for specific error messages - they'll usually point you to the exact configuration issue.

Show original thread

10 replies

Are you performing any fetches or calls to external API's that may not be resolving in these documents?

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:

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
    });
  };

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:

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>'
  }
}

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!

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.

Hey thanks! I just rewrote the image field in my Sanity backend code and now it shows the data. You can mark it solved. 😊

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo