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

Question

这是我第一次使用Sanity构建博客网站来练习使用React JS，在那里我应该从sanity.io.调用一个API，但是我的React网站无法从Sanity获取数据。在网页上应该从Sanity博客导入数据的区域实际上是一个空白屏幕。当我检查控制台时，我发现了这个错误：browser-request.js:115GEThttps://1vqzizs7.apicdn.sanity.io/v1/data/query/production?query=*[_type=="post"]{ 标题， （鼻涕虫？。电流）， 主图像{ 资产->{ _id， 网址 } } } 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”）'在带括号的表达式之后，结束：48，…}}

错误：{描述：“带括号的表达式后面的预期'）'”，结束：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

您询问sanity客户的问题是不对的，应该是这样的：

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

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