如何在TanStack Query的useQuery中配置withCredentials: true

云上老周

2026-8-11

在TanStack Query useQuery中配置withCredentials获取Cookie

TanStack Query（原React Query）本身不直接处理请求配置，它只是执行你传入的请求函数，所以withCredentials的配置要写在你实际发起请求的工具（比如Axios或fetch）里，以下是两种常用场景的实现方式：

1. 继续使用Axios发起请求

直接在Axios的请求配置中添加withCredentials: true即可，useQuery会原样执行这个请求函数：

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// 封装带withCredentials的请求函数
const fetchUserData = async () => {
  const res = await axios.get('/api/user/profile', {
    withCredentials: true // 关键配置
  });
  return res.data;
};

function UserProfile() {
  const { data: user } = useQuery({
    queryKey: ['userProfile'],
    queryFn: fetchUserData
  });

  // 组件渲染逻辑...
}

如果想给所有请求统一配置，可创建全局Axios实例：

// utils/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  withCredentials: true // 全局启用
});

export default axiosInstance;

之后在useQuery的请求函数里直接用这个实例：

import axiosInstance from './utils/axiosInstance';

const fetchUserData = async () => {
  const res = await axiosInstance.get('/api/user/profile');
  return res.data;
};

2. 使用原生Fetch发起请求

Fetch对应的配置是credentials: 'include'，作用和Axios的withCredentials: true一致：

import { useQuery } from '@tanstack/react-query';

const fetchUserData = async () => {
  const res = await fetch('/api/user/profile', {
    credentials: 'include' // 关键配置
  });
  
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

function UserProfile() {
  const { data: user } = useQuery({
    queryKey: ['userProfile'],
    queryFn: fetchUserData
  });

  // 组件渲染逻辑...
}