Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provider Hygraph has a new Asset API that breaks the implemented provider settings #1295

Closed
areindl opened this issue Mar 21, 2024 · 1 comment · Fixed by #1321
Closed

Provider Hygraph has a new Asset API that breaks the implemented provider settings #1295

areindl opened this issue Mar 21, 2024 · 1 comment · Fixed by #1321
Labels
bug Something isn't working provider

Comments

@areindl
Copy link

areindl commented Mar 21, 2024

Hygraph has released an all-new version of their Asset API: https://hygraph.com/docs/api-reference/assets/assets-overview#which-asset-system-does-my-project-use

I am not affiliated with Hygraph, but based on testing it if found the following breaking changes:

Legacy API:

https://media.graphassets.com/output=format:jpg/resize=width:200,height:200/85X5yqQRgm9GFqPEKM5Q

New API:

https://eu-central-1-shared-euc1-02.graphassets.com/cltmqhqjq01us08w6awv24h0x/output=format:jpg/resize=width:200,height:200/clu1nslm3ivi307uvc86wkk2f
  1. Instead of 'https://media.graphassets.com' a new regional endpoint must be used: https://eu-central-1-shared-euc1-02.graphassets.com --> this is okay as it can be configured in nuxtconfig

  2. The URL of the images changed from {baseurl}/{transformation}/{id}' to {baseurl}/{someId}{transformation}/{id}' --> this is a breaking change to the implementation: https://github.com/nuxt/image/blob/e4ea7015d14562fb3d072f0f0ae8cbccd0ed0ac4/src/runtime/providers/hygraph.ts#L41C18-L41C25

Problem

When you now use NuxtImage with

// Nuxt Config
    image: {
        hygraph: {
            baseurl: 'https://eu-central-1-shared-euc1-02.graphassets.com',
            format: ['webp'],
        },
    },

And the following NuxtImage:

             <NuxtImg
                        provider="hygraph"
                        format="webp"
                        quality="90"
                        sizes="sm:100px md:200px lg:800px"
                        fit="contain"
                        class="mx-auto h-56 w-56 rounded-full shadow-lg shadow-blue-700/25"
                         src="https://eu-central-1-shared-euc1-02.graphassets.com/cltmqhqjq01us08w6awv24h0x/clu1nslm3ivi307uvc86wkk2f"
                       />

The resulted src is :


https://eu-central-1-shared-euc1-02.graphassets.com/output=format:webp/resize=width:1600,fit:max/quality=value:90/compress/cltmqhqjq01us08w6awv24h0x/clu1nslm3ivi307uvc86wkk2f

Which is invalid and leads to a 404 error.

Unfortunately, Hygraph does not allow to switch to the old provider. Therefore NuxtImage is currently not working for Hygraph users starting from March 2024 onwards.

Suggested Solution:

Add a new provider config (e.g. hygraph-v2) to stay compatible with the legacy version.

@danielroe
Copy link
Member

cc: @timbenniks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working provider
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants