Sanity listen() receiving all document changes instead of filtered single document

You've hit a common gotcha with Sanity's client.listen() method! The issue is that listener queries only use the top-level filter portion of your query - projections, slicing (like [0]), and other operations are ignored.

According to the Listen API documentation:

"Only the top-level filter portion of the query will be used, anything else including projection, subqueries, slicing or aggregation will be ignored."

So when you write:

const showQuery = `*[_type == "show" && slug == "${this.slug}"][0]{field1, field2, ...}`;

The listener is only seeing *[_type == "show" && slug == "${this.slug}"] and ignoring the [0] slice and the projection. This means you'll get events for all documents matching that filter.

The fix: Remove the [0] and projection from your listen query. Your filter is actually working correctly - you just need to handle the filtering on the client side:

const showQuery = `*[_type == "show" && slug.current == $slug]`;
const showParams = { slug: this.slug };

const subscription = client.listen(showQuery, showParams)
  .subscribe(update => {
    // The update.result will contain the full document after mutations
    const show = update.result;
    console.log('Show updated:', show);
  });

Important notes:

1. Use slug.current if your slug field is a slug type (which has a current property). If it's just a string field, then slug is fine.

2. Always use params for dynamic values to avoid injection issues and ensure proper encoding:

   // Good ✅
   const query = `*[_type == "show" && slug.current == $slug]`;
   const params = { slug: this.slug };
   
   // Avoid ❌
   const query = `*[_type == "show" && slug == "${this.slug}"]`;

3. The update object from the listener includes useful fields like:

   • update.result - the complete document after changes
   • update.transition - type of event (update, appear, disappear)
   • update.mutations - the actual mutations applied

4. If you need real-time updates for your frontend application, you might also want to check out the newer Live Content API, which is more efficient for keeping content in sync with frameworks like Next.js, Nuxt, and others.