0

This is the code for my blog page.

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



export default function Post(){
       
        const [postData, setPost] = useState(null);

                useEffect(() => {
                        sanityClient
                                .fetch(`*[_type == "post"]{
                                        title,
                                        slug,
                                        mainImage{
                                                asset->{
                                                        _id,
                                                        url
                                                },
                                                alt
                                                }
                                        }
                                }`)
                                .then((data) => setPost(data))
                                .catch(console.error);
                }, []);
                return(
                        <main className="bg-blue-100 min-h-screen p-12">
                                <section className="container mx-auto">
                                        <h1 className="text-5xl flex justify-center cursive">
                                                Updates Page
                                        </h1>
                                        <h2 className="text-lg text-gray-600 flex justify-center mb-12">
                                                School Updates
                                        </h2>
                                        <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 leading-snug bg-white border-l-8 border-blue-400" key={index}>
                                                                <img src={post.mainImage.asset.url}
                                                                alt={post.mainImage.alt}
                                                                className="w-full h-full rounded-r object-cover absolute"
                                                                />
                                                                <span className="block relative h-full flex justify-end items-end pr-4 pb-4">
                                                                <h3 className="text-grey-800 text-lg font-bold px-3 py-4 bg-blue-700 text-blue-100 bg-opacity-75 rounded">
                                                                 {post.title}       
                                                                </h3>
                                                                </span>
                                                        </span>
                                                        </Link>
                                                </article>
                                                ))}
                                        </div>
                                </section>
                        </main>
                )
        
        
}

It compiles just fine but doesn't load in the blog posts from the sanity client.

because in the sanity schema "post.js" I get green underline on everything: "Assign object to a variable before exporting as module default eslint(import/no-anonymous-default-export)"

I've looked at the docs it points me at but I'm just not getting wha the issue is. It seems fine to me. Someone please tell me where I am going wrong.

Thanks in advance!

Josh
  • 1
  • At a glance, this looks like it should work. A few things I'd try are: (1) `console.log(client.config())` and make sure your client is configured, and (2) change `.then((data) => setPost(data))` to `.then((data) => console.log(data) || setPost(data))` to ensure you're getting an array of posts. – Geoff Ball Nov 05 '21 at 20:50
  • @GeoffBall it's saying it can't parse the entire expression. Something in that .fetch is wrong I just can't see it. – Josh Nov 06 '21 at 12:51

1 Answers1

0

Fixed, had an extra } in the fetch which wasn't flagging because it was inside the backticks.

Josh
  • 1