Filter an array of dates (datetime) with GROQ (sanity) (React App)

Question

I have a list of movies that could be shown more than once. I decided to provide a user with an option to select multiple dates for a single movie (sanity studio interface).

The schema for movies is as follows:

export default {
  name: 'movie',
  title: 'Movie',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    },
    {
      name: 'dates',
      title: 'Dates',
      type: 'array',
      of: [
        {
          type: 'datetime',
          options: {
            dateFormat: 'YYYY-MM-DD',
            timeFormat: 'HH:mm',
            timeStep: 15,
            calendarTodayLabel: 'Today'
          }
        }
      ]
    },
    {
      name: 'poster',
      title: 'Poster',
      type: 'image',
      options: {
        hotspot: true
      }
    },
    {
      name: 'body',
      title: 'Body',
      type: 'blockContent'
    }
  ],

  preview: {
    select: {
      title: 'title',
      date: 'date',
      media: 'poster'
    }
  }
}

Current query:

const query = groq`*[_type == "movie"]{
  title,
  dates,
  poster,
  body
}`

I need to filter the movie that has today's date in the dates array with GROQ

Maybe I'm overcomplicating this and someone will come up with a better way.

The idea is to avoid duplicates in the database (1 movie can be shown 3-6 times). That's the only reason I used an array

score 0 · Answer 1 · answered Sep 02 '19 at 06:31

The solution for this should be:

const query = '*[_type == "movie" && dates match $today]{title, dates, poster, body}'
const today = new Date().toISOString().split('T')[0]
client.fetch(query, {today}).then(result => {
  // movies which are showing today
})

However, there is currently a bug in the string tokenizer which cripples date string matching. In the meantime, I'm afraid your only option is to fetch all movies and filter client side. We're hoping to get this fixed as soon as possible.

Filter an array of dates (datetime) with GROQ (sanity) (React App)

1 Answers1