重定义urql Client的fetch成员时无法通过TypeScript类型检查

问题根源 #

urql的Client配置要求的fetch函数类型，和全局fetch的类型存在细微差异——比如参数需支持RequestInfo | URL，且依赖undici库的Request类型定义。直接用Parameters<typeof fetch>推导的参数类型无法完全匹配这些要求，因此触发类型报错。

解决方案 #

方法一：复用urql官方定义的Fetch类型 #

从@urql/core导入官方定义的Fetch类型，让自定义fetch函数严格遵循该类型规范：

import { Client, Fetch } from "@urql/core";

// 自定义fetch函数，显式指定类型为urql的Fetch
const customFetch: Fetch = async (...args) => {
  const response = await fetch(...args);
  // 在这里处理响应数据，比如修改返回内容、添加请求日志等
  return response;
};

// 创建Client时传入自定义fetch
const client = new Client({
  url: "你的GraphQL端点地址",
  fetch: customFetch,
  // 其他必要配置项
});

方法二：手动匹配函数签名 #

如果不想额外导入Fetch类型，可以直接模仿urql要求的fetch函数签名，确保参数和返回值完全匹配：

import { Client } from "@urql/core";

const client = new Client({
  url: "你的GraphQL端点地址",
  fetch: async (input: RequestInfo | URL, init?: RequestInit) => {
    const response = await fetch(input, init);
    // 处理响应逻辑
    return response;
  },
});

全局fetch覆盖的类型处理 #

如果需要覆盖全局fetch，同样需要严格匹配全局fetch的类型定义：

// 先获取全局fetch的完整类型
type GlobalFetchType = typeof global.fetch;

const originalFetch = global.fetch;

// 自定义函数严格遵循全局fetch的类型规范
const customGlobalFetch: GlobalFetchType = async (...args) => {
  const response = await originalFetch(...args);
  // 处理逻辑
  return response;
};

global.fetch = customGlobalFetch;

之前尝试失败的原因 #

• 使用Parameters<typeof fetch>时，推导的参数类型仅匹配全局fetch的某一个重载，而urql的fetch要求兼容全部重载（比如支持URL作为第一个参数）。
• 不同环境下（Node.js用undici、浏览器用原生fetch）的Request类型定义存在差异，undici的Request强制要求duplex属性，导致类型不兼容。

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