Hiding API keys in NextJs + SSR

[JordanMad]

Hello,

Whenever I call my API like so

export async function getPosts() {
  const response = await fetch('api', { 
     headers: {
       'x-custom-header': 'hide me'
     }
  )
  ...
}

export async function getStaticProps() {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery('posts', getPosts)
   ...
 }

function Posts() {
   const { data } = useQuery('posts', getPosts)

When the client is refetching the query, the header's value is exposed.

The only solution I can think of is using api routes, and use it in the page, but it's not recommend by the core team.
Or maybe react-query isn't suitable for my case.

What is the recommended approach to this with React-Query?

Thanks in advance.

Note: I've read #2631, quite interesting, but not covering this case I think

[TkDodo]

if you use getPosts on the server and on the client, of course it's exposed. I don't see how this issue does relate to react-query? If you were to call await getPosts() directly instead of using a query and prefetching, you'd have the exact same problem, no?