Get help on Discord

400 Error on Sanity Query Fetching Posts in React Portfolio

6 replies
Last updated: Sep 29, 2021
Hi all, I am starting with Sanity and React to build my portfolio. I am following this tutorial: https://www.youtube.com/watch?v=NO7_jgzVgbc&ab_channel=TraversyMedia However on my console,. I get the 400 error.

This is my code --> I might missed something?

import React, { useState, useEffect } from "react"
import { Link } from "react-router-dom"
import sanityClient from "../client"

export default function Post() {
    //query for information with react hooks
    const [postData, setPost] = useState(null);
    useEffect(() => {
        sanityClient
        .fetch(
            `*[_type == "post"]{
            title
            slug,
            mainImage {
                asset-> {
                    _id,
                    url
                }
            }
        }`
        )
        .then((data) => setPost(data))
        .catch(console.error)
    }, []);
    
    return (
        <main>
            <section className="container mx-auto">
                <h1>Blog Post page</h1>
                adokgr
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    { postData && postData.map((post, index) => (
                    <article>
                        <Link to={"/post"+ post.slug.current} key={post.slug.current}>
                            <span className="block h-64 relative rounded shadow " key={index}>
                                <img src={post.mainImage.asset.url}/>
                                <span>
                                    <h3>{post.title}</h3>
                                </span>
                            </span>
                        </Link>
                    </article>
                    ))}
                </div>
            </section>
        </main>
    );
}
AI Update

Looking at your code, the 400 error is almost certainly caused by a GROQ syntax error in your query. Here's what's wrong and how to fix it:

The Problem

Your query has formatting issues with commas and spacing. Here's the corrected version:

sanityClient.fetch(
    `*[_type == "post"]{
        title,
        slug,
        mainImage {
            asset->{
                _id,
                url
            }
        }
    }`
)

Key fixes:

  • Added comma after title
  • Removed the space in asset-> (should be asset-> not asset-> )
  • Proper comma placement throughout

Check Your Client Configuration

Since you're following an older tutorial, make sure your client.js file includes the required apiVersion parameter. Your client configuration should look like this:

import sanityClient from '@sanity/client'

export default sanityClient({
  projectId: 'your-project-id', // find this at manage.sanity.io
  dataset: 'production',
  useCdn: true,
  apiVersion: '2023-05-03' // THIS IS REQUIRED - use any UTC date
})

According to the Sanity documentation on Project ID, the apiVersion is mandatory for modern Sanity client versions, and missing it will cause errors.

Additional Improvements

  1. Add error handling for missing images:
<img src={post.mainImage?.asset?.url} alt={post.title} />

  1. Check the browser console Network tab - click on the failed request to see the exact error message from Sanity, which will tell you specifically what's wrong with your query.

  2. Verify your schema - make sure you have documents with _type == "post" in your Sanity dataset and that they have a mainImage field.

The 400 error means "Bad Request," which in Sanity almost always points to malformed GROQ syntax. Try the corrected query above first, and if you're still stuck, share the specific error message from the Network tab for more targeted help!

Show original thread
6 replies
Hi and welcome to the Sanity community!
It looks like your query is missing a comma after 
title
(in the 
useEffect()
function). Can you see if adding that in removes the error?
This might still fail until you’ve added a slug and mainImage to your second post. You’re currently checking if 
postData
exists but not each property. One approach is optional chaining (e.g., 
post?.title
and 
post?.slug.current
).
This might still fail until you’ve added a slug and mainImage to your second post.
hey Geoff, thank you, it is working indeed, and you answered my question of what if I dont want/have an image thank u
hey Geoff, thank you, it is working indeed, and you answered my question of what if I dont want/have an image thank u
Great! Happy to hear that’s working for you.

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?