Network error querying Sanity GROQ API in Electron React app

This is a classic CORS (Cross-Origin Resource Sharing) issue! The good news is your query is working fine - the problem is that Sanity's API is blocking the request because your Electron app's origin isn't whitelisted.

When you open that URL directly in your browser, it works because you're making a simple GET request. But when your React app running in Electron tries to fetch it, the browser engine sees it as a cross-origin request and checks CORS headers.

The Solution: Add Your Origin to CORS Settings

You need to add your Electron app's origin to your Sanity project's CORS origins:

1. Go to manage.sanity.io
2. Select your project
3. Navigate to Settings > API > CORS Origins
4. Click Add CORS origin

For Electron apps, you'll likely need to add one of these origins depending on how your app loads content:

• http://localhost:3000 (or whatever port your dev server uses during development)
• file:// (if your Electron renderer loads from the file system)
• http://localhost (without a port)

Important: Make sure to check the "Allow credentials" checkbox if you're using any authentication tokens with your Sanity client. This is required when the Access-Control-Allow-Credentials header needs to be 'true', as explained in this CORS troubleshooting guide.

For Electron-Specific Challenges:

Electron can be tricky with CORS because the renderer process might use the file:// protocol. If adding http://localhost doesn't work, you have a few options:

1. Use a local dev server - Run your React app on http://localhost:3000 and add that to CORS origins (recommended for development)
2. Disable web security in Electron (development only!) - Add webPreferences: { webSecurity: false } to your BrowserWindow config
3. Proxy through the main process - Make API calls from Electron's main process (Node.js environment) where CORS doesn't apply, then send data to the renderer

The CORS configuration documentation has more details about managing these settings, and you can also use the Sanity CLI with sanity cors add if you prefer command-line configuration.

Once you've added the correct origin with credentials enabled, your React app should be able to fetch data without the network error!