How does react-datocms know the format that is supported when calling from server?

Dear reader,

I have a quick question about the react-datocms lib. More precisely the Image Component.

it states that it works both on the clientside and on the serverside. I presume this is in relation with Nextjs (what we use). But I’m quite confused about the GraphQL query to get the necessary information. When querying the responsiveImage you can give it a format: auto property. But how does Dato know from the server what the browser supports? I understand for the browser it checks the headers of the request, but that is not possible for the server, right?

Hello @c.boutens

We use IMGIX to manage the image transformations, so the way we process the “auto” parameter is as documented right here: Automatic | Automatic Parameters | imgix URL API Documentation

Thanks for the fast reply @m.finamor but it doesn’t really answer my question. I understand how IMGIX does it, that is the part that confuses me, because they don’t have the headers or user agent to go off when you query DatoCMS from the server.

@c.boutens auto=format is a query string attached to the URL of your image. For every request to that URL, Imgix looks at the headers to find the most optimized supported format.

Next.js server never actually downloads the image, it simply runs the GraphQL query, and gets the URL of the image as a result, which is then included in the final page.

It’s always the final browser of the visitor that fetches the actual image.

Hope this clears out the air!

Aahhhh okay, far enough, I need to see the GraphQL as the URL “builder” so that doesn’t do any request to the IMGIX itself yet.

THanks @s.verna!

1 Like