Sanity GraphQL Deploy Fails with mapbox-gl createObjectURL Error

The error you're encountering is a Node.js environment issue with mapbox-gl when trying to deploy your GraphQL API. Here's how to fix both problems:

The Main Issue

The window.URL.createObjectURL error happens because mapbox-gl (used by Sanity Studio's map input) tries to run browser code in a Node.js environment during the sanity graphql deploy command. This is a known compatibility issue.

Solution

Option 1: Use the --no-playground flag (Quickest fix)

sanity graphql deploy --no-playground

This skips the playground setup that triggers the mapbox-gl error. You don't really need the GraphQL playground for the Gatsby integration to work - it just needs the API deployed.

Option 2: Add a resolution to your Studio's package.json

If you need the playground or want a cleaner solution, add this to your Studio's package.json:

{
  "resolutions": {
    "mapbox-gl": "npm:empty-npm-package@1.0.0"
  }
}

Then run npm install and try sanity graphql deploy again.

Fixing the Gatsby Warning

Once you've successfully deployed the GraphQL API, you'll need to add a read token to your Gatsby configuration to enable draft previews. According to the gatsby-source-sanity documentation, here's what you need to do:

1. Create a read token in your Sanity project at manage.sanity.io
2. Add it to your gatsby-config.js:

{
  resolve: 'gatsby-source-sanity',
  options: {
    projectId: 'your-project-id',
    dataset: 'production',
    token: process.env.SANITY_READ_TOKEN, // Add this
    overlayDrafts: true,
    watchMode: true,
  }
}

1. Store the token in a .env file (never commit it to git):

SANITY_READ_TOKEN=your-token-here

Without the token, overlayDrafts can't access draft content, which is why you're getting that warning. If you only need published content in development, you can set overlayDrafts: false instead.