Using correct header api code in tanstack query

[jt4000]

Goal:
Add header with bearer in realtion to api key

Problem:
How do you apply header with bearer api code below?

Code:

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
      )
      return await response.json()
    },
  })

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? 'Updating...' : ''}</div>
    </div>
  )
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Missing #root element')
ReactDOM.createRoot(rootElement).render(<App />)

Other:
*The code should be react TS in relation to Tanstack query
*https://stackblitz.com/edit/tanstack-query-tzj47osm?file=src%2Findex.tsx&preset=node

[devrafaelsoares]

The existing answer covers the basic case well. Here is a more complete, production-ready approach using a shared queryFn factory with centralized header configuration — the pattern most teams end up with as the codebase grows.

The Problem with Inline Headers

Adding headers directly in each queryFn works but does not scale:

// ❌ Repeated everywhere, hard to maintain
const response = await fetch(url, {
  headers: { Authorization: `Bearer ${token}` }
});

Recommended: Centralized Fetch Factory

Create a typed fetch wrapper that handles auth headers, error handling, and response parsing in one place:

// lib/api.ts
const API_KEY = import.meta.env.VITE_API_KEY; // or from your auth store

export async function apiFetch<T>(endpoint: string): Promise<T> {
  const response = await fetch(`https://api.github.com${endpoint}`, {
    method: "GET",
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      "Content-Type": "application/json",
      Accept: "application/vnd.github+json",
    },
  });

  // fetch does not throw on 4xx/5xx — this is critical for TanStack Query
  if (!response.ok) {
    throw new Error(`API error ${response.status}: ${response.statusText}`);
  }

  return response.json() as Promise<T>;
}

Using the Factory with useQuery

import { useQuery } from "@tanstack/react-query";
import { apiFetch } from "./lib/api";

type RepoData = {
  full_name: string;
  description: string;
  stargazers_count: number;
  subscribers_count: number;
  forks_count: number;
};

function Example() {
  const { isPending, error, data, isFetching } = useQuery<RepoData>({
    queryKey: ["repoData"],
    queryFn: () => apiFetch<RepoData>("/repos/TanStack/query"),
  });

  if (isPending) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong>⭐ {data.stargazers_count}</strong>
      {isFetching && <span> Updating...</span>}
    </div>
  );
}

Why the response.ok Check Matters

This is a common gotcha with fetch + TanStack Query. Unlike axios, the native fetch API resolves on 4xx/5xx responses instead of throwing. If you skip the !response.ok guard, TanStack Query will treat a 401 Unauthorized as a successful query and cache the error response as data.

Dynamic Tokens (Auth Store Pattern)

If your token comes from state (e.g., after login), read it at request time instead of module load time:

import { useAuthStore } from "./store/auth";

export function useRepoQuery() {
  const token = useAuthStore((s) => s.token);

  return useQuery<RepoData>({
    queryKey: ["repoData", token], // token in key ensures refetch on auth change
    queryFn: async () => {
      const response = await fetch("https://api.github.com/repos/TanStack/query", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!response.ok) throw new Error(`${response.status}`);
      return response.json();
    },
    enabled: !!token, // do not run the query if there is no token yet
  });
}

Key points:

• Include the token in the queryKey so the cache is automatically invalidated when the user logs in or out
• Use enabled: !!token to prevent the query from firing before authentication completes

[JosephHampton]

useQuery isn't the thing doing the fetch, your queryFn is, so the bearer header goes on whatever you call inside queryFn (fetch or axios), not on React Query itself:

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const res = await fetch('https://api.example.com/data', {
        headers: {
          Authorization: `Bearer ${API_KEY}`,
          'Content-Type': 'application/json',
        },
      })
      // fetch does NOT throw on 4xx/5xx, so check it yourself
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      return res.json()
    },
  })

  if (isPending) return 'Loading...'
  if (error) return 'An error occurred: ' + error.message
  return <div>{/* ...data... */}</div>
}

Two things people trip on:

1. fetch doesn't reject on HTTP errors (401, 500, and so on). You have to check res.ok and throw yourself, otherwise React Query thinks the request succeeded and you never hit the error state.
2. Don't hard code secrets in client code. Anything in a browser bundle is public. If this is a frontend app, proxy the request through your own backend and add the token server side. Only put a key straight in queryFn if it's a public or anon key that's meant to be exposed.

With axios it's the same idea, put headers: { Authorization: 'Bearer ' + token } in the axios call inside your queryFn.

If that was what you needed, feel free to select it as the answer.