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

[enmanuelcanelon]

Hey @jt4000!

Adding a Bearer token is quite straightforward. You just need to pass an options object as the second argument to your fetch call inside the queryFn.

Also, since you are using fetch, it's a good practice to manually check if the response is "ok". Unlike axios, fetch doesn't throw an error on 4xx or 5xx status codes, and TanStack Query needs a rejected promise to trigger the error state.

Here is the updated code for your Example function:
Just make sure to replace YOUR_API_KEY_HERE with your actual token. If you're using environment variables in Vite or Next.js, it would be something like process.env.NEXT_PUBLIC_API_KEY.Hope this helps you get it running!

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
        {
          method: 'GET',
          headers: {
            'Authorization': `Bearer YOUR_API_KEY_HERE`,
            'Content-Type': 'application/json',
          },
        }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      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>
  );
}

[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