How to query for posts in a particular category in sanity

Question

I have a card that's supposed open a backdrop with a carousel of some videos. I'm getting all the categories and videos from sanity.io

Here's the card

{categories && 
    categories.map((category)=>{
    return(
    <Card
         key={category._id}
         onClick={openBackdrop}
         categoryRef={category._}id
    >
        <Thumbnail>
            <img
                src={urlFor(category.thumbnail.asset._ref)}
                alt={category.name}
                style={imgStyle}/>
         </Thumbnail>
         <Cardtitle>{category.name}</Cardtitle>
     </Card>
    )

This is my query for the data

    const [backdrop, setBackdrop] = useState(false);
    const [catRef, setCategoryRef] = useState();
    const [content, setContent] = useState();

    function openBackdrop(categoryRef) {
        setBackdrop(true);
        setCategoryRef(categoryRef)
    }

    useEffect(() => {
        const query = `*[(_type == 'pictureContent' || _type == 'videoContent') && category == ${catRef}]`;

        client.fetch(query)
            .then((res) => {
                console.log(res)
                setContent(res);
            })
            .catch((err) => console.log(err));
    }, [catRef]);

And this is the error I keep getting in the browser console

    {
        "response": {
            "body": {
                "error": {
                    "description": "expected ']' following array body",
                    "end": 86,
                    "query": "*[(_type == 'pictureContent' || _type == 'videoContent') && category == [object Object]]",
                    "start": 72,
                    "type": "queryParseError"
                }
            },
            "url": "https://vd2ckais.apicdn.sanity.io/v2022-09-03/data/query/production?query=*%5B(_type%20%3D%3D%20'pictureContent'%20%7C%7C%20_type%20%3D%3D%20'videoContent')%20%26%26%20category%20%3D%3D%20%5Bobject%20Object%5D%5D",
            "method": "GET",
            "headers": {
                "content-length": "216",
                "content-type": "application/json; charset=utf-8"
            },
            "statusCode": 400,
            "statusMessage": ""
        },
    "statusCode": 400,
    "responseBody": "{\n  \"error\": {\n    \"description\": \"expected ']' following array body\",\n    \"end\": 86,\n    \"query\": \"*[(_type == 'pictureContent' || _type == 'videoContent') && category == [object Object]]\",\n    \"start\": 72,\n    \"type\": \"queryParseError\"\n  }\n}",
    "details": {
        "description": "expected ']' following array body",
        "end": 86,
        "query": "*[(_type == 'pictureContent' || _type == 'videoContent') && category == [object Object]]",
        "start": 72,
        "type": "queryParseError"
    }

}

This is all done in React.

I realize the error is in the query itself const query = `*[(_type == 'pictureContent' || _type == 'videoContent') && category == ${catRef}]`; but I don't know how to fix it. Could someone more knowledgeable on groq please help me out?

How to query for posts in a particular category in sanity

0 Answers0