Best way to fetch API data in Next.js with TanStack Query
Unanswered
shadow posted this in #help-forum
shadowOP
Hey everyone,
I’m building a Next.js 15 app with the App Router and using TanStack Query for client-side fetching. My FastAPI backend needs an X-API-KEY, but putting it in the client code exposes it.
I thought about using a Next.js route to proxy requests, but then that route could be abused to hit my FastAPI with my key.
Any ideas on how to fetch the data with TanStack Query without exposing the API key?
I’m building a Next.js 15 app with the App Router and using TanStack Query for client-side fetching. My FastAPI backend needs an X-API-KEY, but putting it in the client code exposes it.
I thought about using a Next.js route to proxy requests, but then that route could be abused to hit my FastAPI with my key.
Any ideas on how to fetch the data with TanStack Query without exposing the API key?
8 Replies
@shadow Hey everyone,
I’m building a Next.js 15 app with the App Router and using TanStack Query for client-side fetching. My FastAPI backend needs an X-API-KEY, but putting it in the client code exposes it.
I thought about using a Next.js route to proxy requests, but then that route could be abused to hit my FastAPI with my key.
Any ideas on how to fetch the data with TanStack Query without exposing the API key?
Keep the key server-side only. The clean way is to make a Next.js API route that uses the key to talk to FastAPI, then have your client fetch from that route with TanStack Query. To stop randoms from abusing it, add auth or rate limiting on that proxy route.
@hojomojo Keep the key server-side only. The clean way is to make a Next.js API route that uses the key to talk to FastAPI, then have your client fetch from that route with TanStack Query. To stop randoms from abusing it, add auth or rate limiting on that proxy route.
shadowOP
The thing is, i don't want people to abuse, i want people to not be able to use it at all.
I don't have auth, it is a open app with no auth, and with rate limiting, they can use but they are rate limited
I would like to setup something in the Next.js API that only accepts requests from the frontend.
You can’t completely stop people from hitting your API if it’s open, but you can make it harder. One way is to have your Next.js API route check for a secret token sent from your frontend before proxying requests. It’s not perfect, but it prevents casual abuse without adding full auth.
shadowOP
I get that I could totally solve this by using server actions and fetching the data directly in server components instead of TanStack Query. That way the API key stays safe.
But I’d really like to stick with TanStack Query because of the extra controls it gives me, things like caching, retries, and better loading states.
Yeah, I get that. In that case, the safest way is still to proxy through a Next.js API route. You just need a way to verify requests are coming from your frontend. One simple method is to generate a short-lived token on the server and have the frontend include it in requests TanStack Query can use that token for every fetch. It keeps your API key hidden while still letting you leverage TanStack Query’s features.