Failed to load resource: the server responded with a status of 400 () React.js

Question

This is my first time using sanity building a blog website for practice using React JS where I am supposed to call a API from sanity.io. But my React website is not able to fetch the data from Sanity. At that area of webpage where there should be data imported from Sanity Blog is actually a blank screen. When I checked the console, there I found this error: browser-request.js:115 GET https://1vqzizs7.apicdn.sanity.io/v1/data/query/production?query=*%5B_type%20%3D%3D%20%22post%22%5D%7B%0A%20%20%20%20%20%20%20%20title%2C%0A%20%20%20%20%20%20%20%20(slug%3F.current)%2C%0A%20%20%20%20%20%20%20%20mainImage%7B%0A%20%20%20%20%20%20%20%20asset-%3E%7B%0A%20%20%20%20%20%20%20%20%20%20_id%2C%0A%20%20%20%20%20%20%20%20%20%20url%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D 400:

  ClientError {response: {…}, statusCode: 400, responseBody: `{\n  "error": {\n 
  "description": "expected ')' fo… "start": 43,\n    "type": "queryParseError"\n  }\n}`, 
  details: {…}, message: "expected ')' following parenthesized expression", …}details: 
  description: "expected ')' following parenthesized expression" 

here is my.network payload

query:*[_type == "post"]{
        title,
        (slug?.current),
        mainImage{
        asset->{
          _id,
          url
        }
      }
     }

And my.network preview

{error: {description: "expected ')' following parenthesized expression", end: 48,…}}

error: {description: "expected ')' following parenthesized expression", end: 48,…}

Here is the code for the page which was supposed to display the information

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

export default function AllPosts() {
  const [allPostsData, setAllPosts] = useState(null);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == "post"]{
        title,
        (slug?.current),
        mainImage{
        asset->{
          _id,
          url
        }
      }
    }`)
  
      .then((data) => setAllPosts(data))
      .catch(console.error);
  }, []);

  return (
    <div className="bg-green-100 min-h-screen p-12">
      <div className="container mx-auto">
        <h2 className="text-5xl flex justify-center cursive">Blog Posts</h2>
        <h3 className="text-lg text-gray-600 flex justify-center mb-12">
          Welcome to my blog posts page!
        </h3>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {allPostsData &&
            allPostsData.map((post, index) => (
              <Link to={"/" + post.slug.current} key={post.slug.current}>
                <span
                  className="block h-64 relative rounded shadow leading-snug bg-white
                      border-l-8 border-green-400"
                  key={index}
                >
                  <img
                    className="w-full h-full rounded-r object-cover absolute"
                    src={post.mainImage.asset.url}
                    alt=""
                  />
                  <span
                    className="block relative h-full flex justify-end items-end pr
                      -4 pb-4"
                  >
                    <h2
                      className="text-gray-800 text-lg font-bold px-3 py-4 bg-red-700
                        text-red-100 bg-opacity-75 rounded"
                    >
                      {post.title}
                    </h2>
                  </span>
                </span>
              </Link>
            ))}
        </div>
      </div>
    </div>
  );
}

Your help will be much appreciated.Thanks

Answer 1

your query asking the sanity client is not right, it should look like so:

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

the '?' it's not needed in queries, if sanity doesn't have that exactly name it will always return null.