Get help on Discord

Error while deploying GraphQL in a Gatsby project with Sanity

6 replies
Last updated: Jun 12, 2023
help sanity + gatsby project 
####### Error while doing: _npm run dev from gatsby project_ #############################
 
warn [sanity] `overlayDrafts` is set to `true`, but no token is given
info [sanity] Fetching remote GraphQL schem

ERROR #gatsby-source-sanity_drafts.10001

GraphQL API not deployed - see
<https://github.com/sanity-io/gatsby-source-sanity#graphql-api> for more info
----------------tried to deploy grpahql from sanity but it's also giving error-- ----------

$ sanity graphql deploy
Dataset: production

Tag: default

:heavy_check_mark: Checking for deployed API

? Do you want to enable a GraphQL playground? Yes

:heavy_multiplication_x: Generating GraphQL schema


TypeError: window.URL.createObjectURL is not a function

at define (/home/normal/Desktop/rrevif/itc/new test/los-repos-dba-lying-cols-8ab2924a6511/studio/node_modules/mapbox-gl/dist/mapbox-gl.js:25:41)

at /home/normal/studio/node_modules/mapbox-gl/dist/mapbox-gl.js:35:1

at /home/normal/studio/node_modules/mapbox-gl/dist/mapbox-gl.js:3:81

at Object.<anonymous> (/home/normal/studio/node_modules/mapbox-gl/dist/mapbox-gl.js:6:2)
AI Update

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.

The first error is suggesting you need to specify a token. This will be necessary in conjunction with overlayDrafts.
The second error appears to be coming from a 
mapbox-gl
package. I don’t see that package in a brand new Studio, so it’s likely used by a plugin installed after-the-fact. Can you please run 
npm ls mapbox-gl
or 
yarn why mapbox-gl
to find out what’s using it?
thanks for the prompt reply, Yes you are right, its an old studio with gatsby.

"@sanity/base": "^2.10.5",
    "@sanity/cli": "^2.36.0",
    "@sanity/color-input": "^2.2.6",
    "@sanity/components": "^2.2.6",
    "@sanity/core": "^2.36.1",
    "@sanity/default-layout": "^2.10.5",
    "@sanity/default-login": "^2.10.5",
    "@sanity/desk-tool": "^2.10.5",
    "@sanity/google-maps-input": "^2.36.0",
    "@sanity/production-preview": "^2.2.6",
    "@sanity/vision": "^2.36.1",
below is the output of the that cmd

$npm ls mapbox-gl

dca-flying-colours-studio@1.0.0 /home/normal/Desktop/rrevif/itc/new test/los-repos-dba-lying-cols--8ab2924a6511/studio
└─┬ sanity-plugin-mapbox-input@0.0.3
  ├─┬ react-map-gl-geocoder@2.2.0
  │ └─┬ @mapbox/mapbox-gl-geocoder@4.7.0
  │   └── mapbox-gl@1.13.2 deduped
  └─┬ react-map-gl@5.3.19
    └─┬ mapbox-gl@1.13.2
      └─┬ @mapbox/mapbox-gl-supported@1.5.0
        └── mapbox-gl@1.13.2 deduped
About overlayDrafts token error , where can get the token from in sanity?
Looks like the window.URL.createObjectURL issue is known. You might be able to resolve it by pinning 
mapbox-gl-js
to a later version, per one of the replies toward the end, but this plugin does not appear to be maintained anymore.
You can create a token from the API tab in Manage .
Thank you so much, it worked 👏

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 freeExplore the demo

Was this answer helpful?