How to only fetch posts that have a certain radio value in Sanity?

Viewed 38

I have a schema that includes a radio selection:

export default {
    name: 'exhibitions',
    title: 'Exhibitions',
    type: 'document',
    fields: [
        {
            name: 'exhibition_name',
            title: 'Name of Gallery',
            type: 'string',
        },
        {
            name: 'exhibition_image',
            title: 'Exhibition Image',
            type: 'image',
        },
        {
            name: 'exhibition_status',
            title: 'Exhibition Status',
            type: 'string', 
            options: {
                list: [
                    {title: 'Past', value: 'past'},
                    {title: 'Current', value: 'current'},
                    {title: 'Future', value: 'future'}
                ],
                layout: 'radio',
            }
        },
    ]
}

I want to make it so that my React app only shows posts that have selected the 'current' value in the radio selection. For example, I have three posts in my Sanity, 1 that has selected 'current', and 2 that have selected 'past'- I only want to fetch the name and image of the one that picked current, not all three of them. I've tried a couple things, but I don't know the best way to achieve this. Here is what I have so far:

import React, { useState, useEffect} from 'react'
import './exhibitions.css'
import { useNavigate, Routes, Route } from "react-router-dom";
import Past from './past'
import Exhibitions from './current'
import Future from './future'
import sanityClient from "../client";
import imageUrlBuilder from '@sanity/image-url'

export default function CurrentExhibitions() {
    
    // links between past, current, and future pages

    const navigate = useNavigate();

    const navigatePast = () => {
        navigate('/past');
    };

    const navigateCurrent = () => {
        navigate('/current');
    };

    const navigateFuture = () => {
        navigate('/future');
    };

    // fetches image url

    const builder = imageUrlBuilder(sanityClient) 

    function urlFor(source) {
        return builder.image(source)
    }

    // fetches sanity data

    const [exhibitionData, setExhibitionData] = useState(null);

    useEffect(() => {
        sanityClient.fetch(
            `*[_type=="exhibitions"]{
                exhibition_name,
                exhibition_image{
                    asset->{
                        _id,
                        url
                    }
                },
                exhibition_status
            }`)
            .then((data) => setExhibitionData(data))
            .catch(err => console.error(err));
    }, [] );
    
    return (
        <main className="main-exhibitions">
            <div className="title">
                    <div className="title-line-left"></div>
                    <h2>exhibitions</h2>
                    <div className="title-line-right"></div>
                </div>
            <div className="exhibitions-navbar">
                <span className="nav-past" onClick={navigatePast}>past</span>
                <span className="nav-current" onClick={navigateCurrent}>current</span>
                <span className="nav-future" onClick={navigateFuture}>future</span>

                <Routes>
                    <Route element={<Past />} path='/past' /> 
                    <Route element={<Exhibitions />} path='/current' />
                    <Route element={<Future />} path='/future' />
                </Routes>
            </div>
            {exhibitionData && exhibitionData.map((exhibitions, index) => (
                <div className="ex-current">
                    <img src={urlFor(exhibitions.exhibition_image).url()} alt={exhibitions.exhibition_alt} />
                </div>   
            ))}
        </main>
    )
}
1 Answers

You can try adding this filter on your query:

`*[_type=="exhibitions" && exhibition_status == 'current'] {
    // Your query
 }`
Related