在TanStack Query中配置带Bearer令牌的API请求头

你可以通过两种方式实现需求：单个请求单独配置，或者全局统一配置，具体如下：

方案1：在单个useQuery请求中添加请求头 #

直接修改queryFn里的fetch调用，新增包含Bearer Token的请求头配置：

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() {
  // 替换为你的实际API Key
  const API_KEY = 'your-actual-api-key-here'

  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
        {
          // 新增请求头配置
          headers: {
            'Authorization': `Bearer ${API_KEY}`
          }
        }
      )
      // 可选：处理请求失败的情况
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`)
      }
      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 />)

方案2：全局统一配置请求头（推荐） #

如果项目中有多个API请求需要携带Bearer Token，推荐全局配置以避免重复代码：

方式一：创建自定义fetch工具函数 #

// utils/fetchWithAuth.ts
const API_KEY = 'your-actual-api-key-here'

export async function fetchWithAuth(url: string, options: RequestInit = {}) {
  return fetch(url, {
    ...options,
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      ...options.headers // 保留传入的自定义请求头
    }
  })
}

在useQuery中使用这个工具函数：

// 在Example组件的queryFn中替换为：
queryFn: async () => {
  const response = await fetchWithAuth('https://api.github.com/repos/TanStack/query')
  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`)
  }
  return await response.json()
}

方式二：通过QueryClient全局默认配置 #

初始化QueryClient时设置defaultOptions，让所有查询请求自动携带请求头：

const API_KEY = 'your-actual-api-key-here'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: async ({ queryKey }) => {
        // 假设queryKey第一个元素为请求URL，可按需调整
        const url = queryKey[0] as string
        const response = await fetch(url, {
          headers: {
            'Authorization': `Bearer ${API_KEY}`
          }
        })
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`)
        }
        return response.json()
      }
    }
  }
})

后续使用useQuery时，只要queryKey包含请求URL，就会自动携带Bearer请求头。

内容的提问来源于stack exchange，提问作者HelloWorld1