TypeError: Failed to parse URL from /api/images about next.js

[icyJoseph]

Hi,

fetch in non-browser environments, necessarily requires an absolute URL to work.

You are setting yourself up for errors and problems, read more here: https://nextjs-faq.com/fetch-api-in-rsc

[icyJoseph]

Isn't there like a HydrationBoundary component in that package?

• https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.

I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.

Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.

What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.

Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well

[icyJoseph]

Isn't there like a HydrationBoundary component in that package?

• https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.

I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.

Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.

What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.

Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well

Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz

What I want to know is the solution for this problem. Is this issue related to react query? Thanks

The solution is on the docs for that package

[icyJoseph]

Isn't there like a HydrationBoundary component in that package?

• https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well

Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? Thanks

The solution is on the docs for that package

Sounds good.
What is the solution if we don't use react-query and just fetch data in useEffect or anywhere in client side?

Then this won't be a problem. The callback of useEffect is not run during SSR, only on the client.

[tqmvt]

Hi,

fetch in non-browser environments, necessarily requires an absolute URL to work.

You are setting yourself up for errors and problems, read more here: https://nextjs-faq.com/fetch-api-in-rsc

So what will be the soluton?
I am calling the api on the client component. It's fine on the localhost. But in build, it throws error. I even use absolute url but the problem is:

• It fails on vercel build without absolute url
• Without build, how can I have the absolute url?

[tqmvt]

Isn't there like a HydrationBoundary component in that package?

• https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.

I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.

Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.

What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.

Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well

Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz

What I want to know is the solution for this problem. Is this issue related to react query? Thanks

[tqmvt]

Isn't there like a HydrationBoundary component in that package?

• https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well

Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? Thanks

The solution is on the docs for that package

Sounds good.
What is the solution if we don't use react-query and just fetch data in useEffect or anywhere in client side?

[leerob]

Closing this as guidance has been provided above to use the absolute URL versus the relative URL when making a fetch from client components.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.