GROQ query error: Unknown query parameter "slug.current" in client code

The error you're seeing is actually about how you're executing the query, not the GROQ syntax itself! The httpUnknownQueryStringParameters error means you're accidentally passing slug.current as an HTTP query parameter instead of as a proper GROQ parameter.

The issue is in your query string - you're using JavaScript template literals (${slug}) which is trying to interpolate the value directly into the query string. When this gets sent to Sanity's API, it's being interpreted incorrectly.

The Problem

Your current query:

*[_type == "post" && slug.current == "${slug}"]

This is trying to do string interpolation, which doesn't work properly with GROQ and can cause the API to misinterpret parts of your query as HTTP parameters.

The Solution

Use GROQ parameters instead - they're safer, cleaner, and the recommended approach according to the GROQ parameters documentation:

const query = '*[_type == "post" && slug.current == $slug][0]'
const params = { slug: slug }

const result = await sanityClient.fetch(query, params)

Notice:

• Use $slug in the query (with the $ prefix)
• Pass the actual value as a separate params object as the second argument to fetch()
• No template literals or string concatenation needed!

Why This Approach is Better

1. Security: Parameters prevent GROQ injection attacks since they're JSON literals, not arbitrary GROQ expressions
2. Proper escaping: The client automatically handles special characters like quotes
3. Cleaner code: No messy string concatenation
4. Type safety: Values maintain their proper data types

The Vision tool works because you're typing the query directly with the actual value, but when using the client programmatically, you need to use the parameter syntax. This is the same reason your simple *[_type == "post"] query works - it doesn't have any dynamic values that could be misinterpreted!