ERR_INVALID_URL on Hygraph Public API stored in environment variable

Help
1

Since Next.js 13, I noticed that some of my projects failed to deploy when reading environment variable that contains Hygraph Public API, specifically “Hygraph High Performance Public API”.

I attached one example from a project currently using Next.js 14. I have altered the error log where it shows the real API endpoint and replace it with XXXXX

Strangely, the Hygraph Authentication Token works well without problem, even though I put it in the same environment file as Hygraph Public API

The quick fix/workaround with this problem is to use the hard-coded API endpoint I mentioned above (the one stored in javascript variable). I intended to not expose the Hygraph Public API in the codebase/source code, but since it keeps throwing errors, I have to use this workaround

TypeError: Failed to parse URL from "https://ap-southeast-2.cdn.hygraph.com/content/xxxxx/master"
    at new Request (node:internal/deps/undici/undici:5272:19)
    at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:177224)
    ... 5 lines matching cause stack trace ...
    at stringify (<anonymous>)
    at eR (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134889)
    at eP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135332) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:405:5)
      at new URL (node:internal/url:676:13)
      at new Request (node:internal/deps/undici/undici:5270:25)
      at i (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:177224)
      at v (/vercel/path0/.next/server/app/page.js:14:116)
      at N (/vercel/path0/.next/server/app/page.js:62:131)
      at em (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131226)
      at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142926
      at Array.toJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146504)
      at stringify (<anonymous>) {
    input: '"https://ap-southeast-2.cdn.hygraph.com/content/xxxxx/master"',
    code: 'ERR_INVALID_URL'
  }
}
2

Hi @naufalhaidar12342!

Welcome to the Vercel Community :smiley:

It’s strange that the Hygraph Authentication Token worked for you but the Hygraph Public API didn’t. Could you maybe do some more logging to pinpoint where any issues occur.

For example, log the environment variable before using it:

console.log('HYGRAPH_PUBLIC_API:', process.env.HYGRAPH_PUBLIC_API);

Other thoughts: did you change the environment variable at any point? Be sure that there’s no extra spaces or incorrect formatting that is causing issues.

3

Hmm this is weird, when I add console.log() inside the function that checks if the environment variable is not null or undefined, the log shows up when I run the project locally and when deployed to Vercel.

I tried testing if there is any sneaky space or any letter changed using online tool like diffchecker, but it shows that environment variable and the hard-coded API are identical

If I look up similar case that returns ERR_INVALID_URL error, I found several of them. But, specifically using Hygraph API, it seems not a lot of people encounter the error. I could be wrong though, since I only look up using one search engine

4

That is odd!

I found several of them. But, specifically using Hygraph API, it seems not a lot of people encounter the error.

I wonder if it’s worth checking with the Hygraph team to see if anyone has seen this and has a workaround? Unsure if it’s a Vercel issue per se.

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.