加载资源失败：服务器响应状态为 400 () React.js

Question

这是我第一次使用 sanity 构建博客网站以练习使用 React JS，我应该从 sanity.io 调用 API。但是我的 React 网站无法从 Sanity 获取数据。在应该有从 Sanity Blog 导入数据的网页区域实际上是一个空白屏幕。当我检查控制台时，我发现了这个错误： 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" 

这是我的网络负载

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

还有我的网络预览

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

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

这是应该显示信息的页面的代码

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>
  );
}

非常感谢您的帮助。谢谢

Answer 1

您询问理智客户端的查询不正确，应该如下所示：

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

'?'查询中不需要它，如果 sanity 没有确切的名称，它将始终返回 null。