How to use references() function in Sanity HTTP API GET requests?

The issue you're experiencing is a URL encoding problem. When making GET requests to the Sanity API, special characters in your GROQ query need to be properly URL-encoded, and the && operator is the culprit here.

In GROQ queries sent via HTTP GET requests, you need to encode && as %26%26 (since & has special meaning in URLs as a parameter separator). The Query API documentation specifically mentions this requirement.

Here's how to fix your queries:

Example #1 - Fixed:

https://mySanityId.api.sanity.io/v2021-06-07/data/query/production?query=*[_type == "registrationForm" %26%26 references($id)]&$id="abcdef123456"

Example #2 - Fixed:

https://mySanityId.api.sanity.io/v2021-06-07/data/query/production?query=*[_id == $id]{"registrations": *[_type == "registrationForm" %26%26 references(^._id)]}&$id="abcdef123456"

Notice the %26%26 replacing && in both queries.

Better Approach: Use POST Requests

While URL encoding works, a cleaner solution is to use POST requests instead of GET. This avoids URL encoding issues entirely since the query goes in the request body:

fetch('https://mySanityId.api.sanity.io/v2021-06-07/data/query/production', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: '*[_type == "registrationForm" && references($id)]',
    params: { id: "abcdef123456" }
  })
})

In Postman, you'd set the method to POST and put your query and parameters in the JSON body.

Using the Sanity Client

If you're working in JavaScript/Node.js, the Sanity client handles all encoding automatically:

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'mySanityId',
  dataset: 'production',
  apiVersion: '2021-06-07',
})

const result = await client.fetch(
  '*[_type == "registrationForm" && references($id)]',
  { id: "abcdef123456" }
)

The references() function works perfectly fine in HTTP queries—you just need to handle the URL encoding properly when using GET requests, or switch to POST to avoid the hassle entirely.